如何使用 CSS 创建一行具有流动间距的对齐元素？

Question

如何使用text-align:justify、display: flex、column-count 和/或其他 CSS 属性创建一行具有自动宽度的块元素？

Answer 1

使用以下组件：

• 行的text-align:justify 容器
• 每个列都有一个 inline-block 容器
• inline-block 占位符和 width:100% 用于拉伸内部

`

    /*Row container is justified*/
    #container { width: 100%; text-align: justify; }

    /*Column container and placeholder are inline-block*/
    object, span { display: inline-block; }

    /*Placeholder is stretched to enforce shrink-wrapping*/
    span { width: 100%; }

 
      <!--row-->
      <div id="container">
        <!--column-->
        <object>
          <!--content-->
          <div>
          foo
          </div>
        </object>
        <object>
          <div>
          bar
          </div>
        </object>
        <object>
          <div>
          baz
          </div>
        </object>
        <object>
          <div>
          bop
          </div>
        </object>
        <object>
          <div>
          bip
          </div>
        </object>
        <!--placeholder-->
        <span></span>
      </div>

或者使用带有嵌套inline-block 和column-count 行的text-align:justify 容器，其中column-count 是一个等于子元素数量的数字：

#main, #container { width: 100%; }
#main { text-align: justify; }
#container { display:inline-block; } 
#container { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5;}

<!--full width container-->
<div id="main">

<!--justified inline-block row-->
  <div id="container">
     <!--columns-->
      <div>
      foo
      </div>
      <div>
      bar
      </div>
      <div>
      baz
      </div>
      <div>
      bop
      </div>
      <div>
      bip
      </div>
  </div>
</div>

或带有display:flex; flex-direction: row 的全角容器和带有flex:auto 的列：

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
  width: 100%;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

<div id="flex-container">
    <div class="flex-item">Foo</div>
    <div class="flex-item">Bar</div>
    <div class="flex-item">Baz</div>
    <div class="flex-item">Bop</div>
    <div class="flex-item">Bip</div>
</div>

或者display:grid 和auto 对应grid-template-columns 和justify-content: space-between 中的每一列：

#grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: space-between;
  }

    <div id="grid-container">
        <div>Foo</div>
        <div>Bar</div>
        <div>Baz</div>
        <div>Bop</div>
        <div>Bip</div>
    </div>

或者display: inline-grid 和auto 对应grid-template-columns 和text-align: justify 中的每一列：

#grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto auto auto;
  width: 100%;
  text-align: justify;
  }

    <div id="grid-container">
        <div>Foo</div>
        <div>Bar</div>
        <div>Baz</div>
        <div>Bop</div>
        <div>Bip</div>
    </div>

块级元素生成一个主要的块级框，其中包含后代框和生成的内容，也是任何定位方案中涉及的框。

一些块级元素可能会生成除主框之外的其他框：“list-item”元素。这些附加框是相对于主框放置的。

不可替换的内联块和不可替换的表格单元格是块容器，但不是块级框。

非行内框的行内层框（例如被替换的行内层元素、行内块元素和行内表元素）称为原子行内层框，因为它们作为一个单独的行内格式化上下文参与不透明的盒子。

当一行上的行内级别框的总宽度小于包含它们的行框的宽度时，它们在行框中的水平分布由'text-align'属性确定。如果该属性的值为“justify”，则用户代理也可以拉伸内联框中的空格和单词（但不能拉伸内联表和内联块框）。

参考文献

• CSS 2.1: Visual Formatting Model

• Justify Grid

• CSS Basic Box Model

• CSSPlay: Basic Flex Box Holy Grail Layout with Sticky Footer

• CSS Features for Adaptive Layouts

• Equidistant Objects with CSS | CSS-Tricks

• How to use CSS3 columns | Webdesigner Depot

• Difference between inline box and atomic inline box

• What's the difference between a block-level box and a principal block-level box?

• Inline- and block-level boxes inside the block-container box

Answer 2

你可以试试这个：

• 对容器使用text-align:justify；
• 对容器使用:after；
• 对列使用display:inline-block；
• 在最后添加一些中断；

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li class="break"></li>
  <li class="break"></li>
  <li class="break"></li>
  <li class="break"></li>
</ul>

CSS

ul {
  list-style: none outside none;
  margin:0;
  padding: 0;

  text-align: justify;
  font-size: 0.1px; /*hide whitespace between elements*/
}
ul:after{
  content: '';
  display: inline-block;
  width: 100%;
}
li {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: hsla(20,50%,85%,09);
  padding: 0;
  margin: 10px;

}
.break {
   height: 0;
}

请查看demo。更多详情请点击here。