web-dev-qa-db-ja.com

FlexBoxを使用して列を次の行に移動する

1、2、3の順序で3つの列があります。

[〜＃〜] html [〜＃〜]

<div class="flex-container">
    <div class="item first">1</div>
    <div class="item second">2</div>
    <div class="item third">3</div>
</div>

[〜＃〜] css [〜＃〜]

.flex-container {
    display: flex;
}
.item {
    background: orange;
    padding: 10px auto;
    color: #fff;
    font-family: arial;
    flex-grow: 100;
    flex-shrink: 50;
    text-align: center;
}
.first {
    order: 1;
}
.second {
    order: 2;
}
.third {
    order: 3;
}

モバイル画面の列に切り替えたときに必要なものは、次のように表示されます。

1 3
2

メディアクエリ

/* Too narrow to support three columns */
 @media all and (max-width: 640px) {
    .second {
        order: 3;
        /* And go to second line */
    }
    .third {
        order: 2;
    }
}

2列目は次の行に移動する必要があります。

フィドル

これどうやってするの？

htmlcssflexbox
8
Aamir Shahzad

デフォルトでは、flex-directionはrowですが、columnに変更してflex-wrap:wrapを使用する必要があります（flex-flow:column wrapを使用してすぐに記述できます）。 3番目の列を次の列にジャンプさせるには、.flex-containerの高さがすべての.firstと.secondbutを含むのに十分な大きさである必要があることに注意してください。 3つのアイテムすべてが含まれています。それだけで、.thirdがスペース全体（2列目）を拡張/拡張していることがわかります。したがって、flex-grow:0を設定して、flex-basis:50%を使用してみてください。コードは次のとおりです。

@media all and (max-width: 640px) {
  .flex-container {
    flex-flow:column wrap;  
    height:40px;   
  }    
  .third {
    flex-grow:0;
    flex-basis:50%;
  }
}

デモ

flex-box の代わりに column box layoutを使用する別の解決策を次に示します。それは確かに非常にうまく機能します。

デモ2

14
King King