☰

フレックスボックスの列に2つのフレックスアイテムを並べて設定する 質問する

tag-icon • tag-icon html css flexbox
フレックスボックスの列に2つのフレックスアイテムを並べて設定する 質問する

コンテナ内に列方向に表示している要素がいくつかありますdisplay: flex。

これにより、内部のコンテナーが積み重ねられたビューに配置されます。

たとえば、積み重ねられた要素が 5 つあり、そのうち 2 つをインラインまたはフレックス方向の行で表示する必要があるとします。

問題の2つの要素を別のdivに配置することなくフレックス方向行を適用できます...

これらの要素を並べて配置することは可能ですか?

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
  width: calc(50% - 10px);
  display: inline-block;
  float: left;
}

.flex-column .column-item:nth-of-type(4) {
  margin-right: 20px;
}
<div class="flex-column">
  <div class="column-item">a</div>
  <div class="column-item">b</div>
  <div class="column-item">c</div>
  <div class="column-item">d</div>
  <div class="column-item">e</div>
</div>

ベストアンサー1

親にプロパティを与えてしまうと、それは不可能だと思いますがflex-direction:column;、代わりに、プロパティflex-wrap:wrapを使用して要素の幅を有効にして制御することができますflex-basis。これにより、HTML 構造を変更せずに、必要な効果を実現できます。

.flex-column {
    display: flex;
    flex-wrap:wrap;
}

.flex-column .column-item {
 flex-basis:100%;}
.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
    flex-basis:50%;
   
    
}
<div class="flex-column">
    <div class="column-item">a</div>
    <div class="column-item">b</div>
    <div class="column-item">c</div>
    <div class="column-item">d</div>
    <div class="column-item">e</div>
</div>

おすすめ記事