web-dev-qa-db-ja.com

フレックスアイテムの幅を同じにします

以下の例を見ると、ヘッダーが必要です（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>
htmlcssflexboxcss-grid
3
Ashok Koyi

Flexbox方式

テキストアイテム（.section-child）を同じ幅にするには、これまでに行ったflex: 1 1 0を使用する必要があります。これはflex: 1と言うのと同じです。

ただし、これだけでは2つの理由で目標を達成できません。

  1. フレックスコンテナである.section-childの親だけでなく、より大きなコンテナ内のフレックスアイテムも、デフォルトではそのコンテンツの幅に制限されています。そのため、展開されず、テキストがコンテナからオーバーフローする可能性があります。 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グリッドメソッド

実際の目標が、行内のすべてのフレックスアイテムを最長のアイテムの幅と等しくすることである場合、それはflexboxでは不可能です。

Flexは、主軸にflex: 1を提供するため、同じ幅と同じ高さのフレックスアイテムを実行できます。

Flexは、交差軸にalign-items: stretchを提供するため、同じ幅と同じ高さの列/行を実行することもできます。

ただし、flexbox仕様には、特定の兄弟のサイズに基づく同じサイズのフレックスアイテムに関するものはありません。ただし、flexboxの姉妹テクノロジーであるCSSグリッドはそれを実行できます。

グリッドの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>

仕組みは次のとおりです。

12
Michael_B

Flexboxは、レイアウトのようなテーブルには最適ではありませんが、近づくことはできます。

  • flex: 1 1 100%をsectionchildに追加すると、100％に設定されていることに基づいて、均等に縮小（または拡大）されます。

  • overflow: hiddenまたはmin-widthを追加して、section-childにコンテンツよりも小さくすることが許可されていることを伝えます

  • flex-basis: 100%またはflex-grow: 1をsectionに追加すると、その親であるtop-levelがいっぱいになります。

vertical-separatorとして、代わりにすべての::afterで疑似section-childを使用しましたが、最初のものを使用しました。絶対位置を使用するため、position: relativeにはsection-childが必要です。

.top-level {
  display: flex;
  flex-flow: row wrap;
}

.section {
  flex-basis: 100%;              /*  added  */
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid;
  margin-right: 12px;
  margin-top: 12px;
}

.section-child {
  position: relative;             /*  added  */
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  flex: 1 1 100%;                 /*  added  */
  overflow: hidden;               /*  added  */
}

.child-title {
  white-space: nowrap;
}

.section-child + .section-child::after {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  border-left: 1px solid rgba(0,0,0,0.3);
}
<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="section-child">
      <h4 class="child-title">Longer title</h4>
      <!--A lot more content here-->
    </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="section-child">
      <h4 class="child-title">Longer title</h4>
      <!--A lot more content here-->
    </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="section-child">
      <h4 class="child-title">Longer title</h4>
      <!--A lot more content here-->
    </div>
    <div class="section-child">
      <h4 class="child-title">Much much longer title</h4>
      <!--A lot more content here-->
    </div>
  </section>
</div>
4
LGSon

コードに何度か、claasの代わりにclassを記述しました。

<div claas="section-child">
  <h4 class="child-title">Title</h4>
  <!--A lot more content here-->
</div>

次に、vertical-separator divを削除し、代わりにcssボーダーを使用して、html構造を単純化する必要があります。

.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;
}

.section-child:not(:last-of-type) {
  margin: 8px 0;
  border-right: solid 1px rgba(0, 0, 0, 0.3);
}

.child-title {
  white-space: wrap;
}
<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="section-child">
      <h4 class="child-title">Longer title</h4>
      <!--A lot more content here-->
    </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="section-child">
      <h4 class="child-title">Longer title</h4>
      <!--A lot more content here-->
    </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="section-child">
      <h4 class="child-title">Longer title</h4>
      <!--A lot more content here-->
    </div>
    <div class="section-child">
      <h4 class="child-title">Much much longer title</h4>
      <!--A lot more content here-->
    </div>
  </section>
</div>

white-space: nowrapの.child-titleを削除しました。これは、flex値が単なるヒントであり、「はるかに長いタイトル」をラップしないと、スペースがかかりすぎるためです。本当にnowrapを使用したい場合は、コンテナが十分に大きいことを確認し、オーバーフローを使用する必要があります。

2
wasthishelpful