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

Question

如果您看下面的示例，我希望标头（h4.child-title）在父容器内具有相同的长度。

但是我并没有成功实现这一目标。

任何帮助表示赞赏。

.top-level {

  display: flex;

  flex-flow: row wrap;

}



.section {

  display: flex;

  flex-flow: row nowrap;

  border: 1px solid;

  margin-right: 12px;

  margin-top: 12px;

}



.section-child {

  display: flex;

  flex-flow: column nowrap;

  align-items: center;

  flex: 1 1 0;

}



.child-title {

  white-space: nowrap;

}



.vertical-separator {

  width: 1px;

  background-color: rgba(0, 0, 0, 0.3);

  margin: 8px;

}


<div class="top-level">

  <section class="section">

    <div claas="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

  <section class="section">

    <div claas="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

  <section class="section">

    <div claas="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

</div>

Answer 1

弹性盒法

为了使文本项（.section-child）的宽度相等，您需要使用flex: 1 1 0已完成的。这和说的一样flex: 1。

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

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

2. 默认情况下，弹性项目不能小于其内容的大小。初始设置为min-width: auto。因此flex: 1，无法均匀分配容器空间，因为弹性项目无法收缩到最长的项目之外。您需要使用覆盖此行为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 class="top-level">

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">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 {

  /* white-space: nowrap; */

}



.vertical-separator {

  width: 1px;

  background-color: rgba(0, 0, 0, 0.3);

  margin: 8px;

}


<div class="top-level">

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">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 {

  /* white-space: nowrap; */

}



.vertical-separator {

  background-color: rgba(0, 0, 0, 0.3);

  margin: 8px;

}


<div class="top-level">

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title text text text text text text text text text text</h4>

      <!--A lot more content here-->

    </div>

  </section>

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title text text text text text text</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

  <section class="section">

    <div class="section-child">

      <h4 class="child-title">Title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Longer title</h4>

      <!--A lot more content here-->

    </div>

    <div class="vertical-separator"></div>

    <div class="section-child">

      <h4 class="child-title">Much much longer title</h4>

      <!--A lot more content here-->

    </div>

  </section>

</div>