Css 在横轴上对齐内容-flex_Css_Flexbox

Css 在横轴上对齐内容-flex

css

Css 在横轴上对齐内容-flex,css,flexbox,Css,Flexbox,在主轴上，justify content，因为之间的空间或周围的空间看起来很直观 ------------------------------------------------------------ 对于以下元素 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel

在主轴上，

justify content

，因为

之间的空间或周围的空间看起来很直观

------------------------------------------------------------
对于以下元素
<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
     <div class = "container">
      <div class = "box box1">1</div>
      <div class = "box box2">2</div>
      <div class = "box box3">3</div>
      <div class = "box box4">4</div>
      <div class = "box box5">5</div>
      <div class = "box box6">6</div>
      <div class = "box box7">7</div>
      <div class = "box box8">8</div>
      <div class = "box box9">9</div>
      <div class = "box box10">10</div>
     </div>

  </body>
</html>


下面是横轴上
和

周围空间之间的

空间的输出：


在上述输出中
周围的空间和中间的空间是什么意思？
来自
在第二个示例中，您没有为列设置高度，因为列与内容一样高，所以没有空间可填充，因此周围和之间的空间实际上不会占用任何额外空间
在第一个示例中，您的flex是行，因为容器的宽度为100%，并且每个项目的宽度加起来不等于该宽度
周围的空间
意味着在项目的每一侧，在项目之间的空间

之间平均共享剩余空间。简单地说，前者的作用类似于左/右边距，后者的作用类似于间隙。一个非常重要的注意事项是，

调整内容

影响主轴，而不是横轴，并且无论使用哪个属性值，因此对于弹性行，它是水平的，弹性列是垂直的。对于横轴，使用

对齐项目

，它有自己的属性值，即

flex start | flex end | center | baseline | stretch

，但行上没有

space-*

，容器是100%宽度，因此如果所有内容的宽度都小于100%宽度，则会显示该空间。在列上，并没有defaut高度，元素将堆叠，容器将增长以包装它们。将容器的高度设置为高于子容器的高度，则“调整内容”规则将在它们之间分配额外的空间。@overexchange我会说“是”。。。就我个人而言，只要CSS Grid具有与Flexbox相同的浏览器支持，我就会在许多情况下切换到它，它也同样可以完成简单的任务，尽管仍然会有简单的块/内联的情况。是的，在这两种情况下，项都是均匀分布的，但是，横轴中

flex项周围的空间是什么意思？在横轴中，

弹性项之间的

空格是什么意思？参见编辑，我刚才说的是为什么在第二个示例中没有空格
.box{
    color: white;
    font-size: 100px;
    text-align: center;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1);
}

.box1{ background: #1abc9c; }
.box2{ background: #3498db; }
.box3{ background: #9b59b6; }
.box4{ background: #34495e; }
.box5{ background: #f1c40f; }
.box6{ background: #e67e22; }
.box7{ background: #e74c3c; }
.box8{ background: #bdc3c7; }
.box9{ background: #2ecc71; }
.box10{ background: #16ae85; }


/* Property of parent container - start */
/* Justify-content works on main axis of the border*/
.container{
    display:flex;
    justify-content: space-between;
    flex-direction: column;
}
/* Property of parent container - start */

justify-content: space-between; /* Distribute items evenly
                               The first item is flush with the start,
                               the last is flush with the end */

justify-content: space-around;  /* Distribute items evenly
                               Items have a half-size space
                               on either end */