使d性项目连续具有相等的宽度

使d性项目连续具有相等的宽度 d性盒法

为了使文本项（

.section-child

）的宽度相等，您需要使用

flex: 1 1 0

已完成的。这和说的一样

flex: 1

。

但是，由于两个原因，这本身无法实现目标：

1. .section-child

   默认情况下，flex容器的父级，但更大容器中的flex项，仅限于其内容的宽度。因此它不会扩展，文本可能会溢出容器。你需要申请

   flex: 1

   到

   .section

   ，也是如此。

2. 默认情况下，d性项目不能小于其内容的大小。初始设置为

   min-width: auto

   。因此

   flex: 1

   ，无法均匀分配容器空间，因为d性项目无法收缩到最长的项目之外。您需要使用覆盖此行为

   min-width: 0

   。

```
.top-level {

  display: flex;  flex-flow: row wrap;}.section {  display: flex;  flex-flow: row nowrap;  border: 1px solid;  margin-right: 12px;  margin-top: 12px;  flex: 1;  min-width: 0;}.section-child {  display: flex;  flex-flow: column nowrap;  align-items: center;  flex: 1;  min-width: 0;}.child-title {  white-space: nowrap;}.vertical-separator {  width: 1px;  background-color: rgba(0, 0, 0, 0.3);  margin: 8px;}

```

<div >  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title</h4>      <!--A lot more content here-->    </div>  </section>  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title</h4>      <!--A lot more content here-->    </div>  </section>  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title</h4>      <!--A lot more content here-->    </div>  </section></div>

现在，所有伸缩项目的宽度均相等。但是，由于您将文本设置为

nowrap

，因此它的边界可能会溢出。如果删除

nowrap

，则一切都很好。

.top-level {  display: flex;  flex-flow: row wrap;}.section {  display: flex;  flex-flow: row nowrap;  border: 1px solid;  margin-right: 12px;  margin-top: 12px;  flex: 1;  min-width: 0;}.section-child {  display: flex;  flex-flow: column nowrap;  align-items: center;  flex: 1;  min-width: 0;}.child-title {  }.vertical-separator {  width: 1px;  background-color: rgba(0, 0, 0, 0.3);  margin: 8px;}<div >  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title</h4>      <!--A lot more content here-->    </div>  </section>  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title</h4>      <!--A lot more content here-->    </div>  </section>  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title</h4>      <!--A lot more content here-->    </div>  </section></div>

---

CSS网格方法

如果您的实际目标是使该行中的所有flex项目都等于最长项目的宽度，那么flexbox无法做到这一点。

Flex可以提供相等宽度和相等高度的Flex项目，因为它

flex: 1

在主轴上提供。

Flex还可以

align-items: stretch

在横轴上提供相同宽度和高度的列/行，因为它提供了交叉轴。

但是flexbox规范中没有关于基于特定同级物大小的同等大小flex项目的内容。但是，flexbox的姊妹技术CSS Grid可以做到。

通过使用网格的

fr

单位，可以将网格中的列宽设置为最长列的宽度。

.top-level {  display: flex;  flex-flow: row wrap;}.section {  display: grid;  grid-template-columns: 1fr 1px 1fr 1px 1fr;  margin-right: 12px;  margin-top: 12px;}.section-child {  display: flex;  justify-content: center;  align-items: center;  min-width: 0;  background-color: green;}.child-title {  }.vertical-separator {  background-color: rgba(0, 0, 0, 0.3);  margin: 8px;}<div >  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title text text text text text text text text text text</h4>      <!--A lot more content here-->    </div>  </section>  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title text text text text text text</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title</h4>      <!--A lot more content here-->    </div>  </section>  <section >    <div >      <h4 >Title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Longer title</h4>      <!--A lot more content here-->    </div>    <div ></div>    <div >      <h4 >Much much longer title</h4>      <!--A lot more content here-->    </div>  </section></div>