----------------------------------------------- -------------

对于以下元素，

<!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>

横轴上有样式，

.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 */

以下是space-between和＆amp;的输出。横轴space-around：

在上面的输出中，

space-around ＆amp; 空格 - 之间的意思是什么？

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

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 */

在第二个示例中，如果没有为列设置高度，则没有空间可以填充，因为列与内容一样高，因此空间和空格之间不会占用任何额外空间< / p>

在flex是行的第一个示例中，由于容器的宽度为100％且每个项目的宽度不等于该宽度，因此需要额外的空间来填充

十字轴上的证明 - 内容 - flex

----------------------------------------------- -------------

1 个答案: