Flex(Flexible Box Layout)

公開日：2020-11-02 更新日：2020-11-03

1. 概要

Flex(Flexible Box Layout)によるレイアウトです。

2. 横並びにする

親要素を display:flex にすると、子要素が横並びになります。
各要素の幅は、flex-basis で指定します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML・CSS・JavaScript</title>
    <style>
      .main  { border:1px solid red; padding:4px; width:400px; }
      
      .flex  { display:flex; }
      .item  { border:1px solid blue; }
      .item1 { flex-basis: 50px; }
      .item2 { flex-basis:100px; }
      .item3 { flex-basis:100px; }
    </style>
  </head>
  <body>
    <div class="flex main">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
  </body>
</html>

実行結果：


3. 隙間が埋まるまで幅を拡大する

親要素に隙間があった場合、その隙間が埋まるように子要素を拡大させたい場合は、flex-grow を指定します。
0 を指定した場合は、拡大しません。
全ての要素を 1 にした場合は、全て均等に拡大します。
特定の要素だけ拡大率を上げたい場合は、その要素の flex-grow だけ、大きい値にします。

次の例では、３つ目の要素だけ、拡大します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML・CSS・JavaScript</title>
    <style>
      .main  { border:1px solid red; padding:4px; width:600px; }
      
      .flex  { display:flex; }
      .item  { border:1px solid blue; }
      .item1 { flex-grow:0; flex-basis:100px; }
      .item2 { flex-grow:0; flex-basis:100px; }
      .item3 { flex-grow:1; flex-basis:100px; }
    </style>
  </head>
  <body>
    <div class="flex main">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
  </body>
</html>

実行結果：


4. 入りきるように幅を縮小する

親要素に子要素が入りきらない場合、入りきるように子要素を縮小させたい場合は、flex-shrink を指定します。
0 を指定した場合は、縮小しません。
全ての要素で 1 にした場合は、全て均等に縮小します。
特定の要素だけ縮小率を上げたい場合は、その要素の flex-shrink だけ、大きい値にします。

次の例では、３つ目の要素だけ、縮小します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML・CSS・JavaScript</title>
    <style>
      .main  { border:1px solid red; padding:4px; width:250px; }
      
      .flex  { display:flex; }
      .item  { border:1px solid blue; }
      .item1 { flex-shrink:0; flex-basis:100px; }
      .item2 { flex-shrink:0; flex-basis:100px; }
      .item3 { flex-shrink:1; flex-basis:100px; }
    </style>
  </head>
  <body>
    <div class="flex main">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
  </body>
</html>

実行結果：


5. flex でまとめて指定する

flex-grow, flex-shrink, flex-basis を flex で一括で指定できます。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML・CSS・JavaScript</title>
    <style>
      .main  { border:1px solid red; padding:4px; }
      
      .flex  { display:flex; }
      .item  { border:1px solid blue; }
      .item1 { flex:0 0 100px; }
      .item2 { flex:0 0 100px; }
      .item3 { flex:1 1 100px; }
    </style>
  </head>
  <body>
    ３つ目の要素が、親要素（赤枠）いっぱいまで拡大される。
    <div class="flex main" style="width:600px;">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
    <br />
    ３つ目の要素が、親要素（赤枠）に収まるように縮小される。
    <div class="flex main" style="width:250px;">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
    <br />
  </body>
</html>

実行結果：


また、flex:none で拡大縮小なし、flex:auto で拡大縮小あり、となります。
この場合、flex-basis は auto となるため、要素の内容によって幅が決まります。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML・CSS・JavaScript</title>
    <style>
      .main  { border:1px solid red; padding:4px; }
      
      .flex  { display:flex; }
      .item  { border:1px solid blue; }
      .item1 { flex:none; /* flex: 0 0 auto; と同じ */ }
      .item2 { flex:none; /* flex: 0 0 auto; と同じ */ }
      .item3 { flex:auto; /* flex: 1 1 auto; と同じ */ }
    </style>
  </head>
  <body>
    ３つ目の要素が、親要素（赤枠）いっぱいまで拡大される。
    <div class="flex main" style="width:600px;">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
    <br />
    ３つ目の要素が、親要素（赤枠）に収まるように縮小される。
    <div class="flex main" style="width:250px;">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
    <br />
  </body>
</html>

実行結果：


6. 順序を逆にする

flex-direction:row-reverse で、順序を逆にできます。
右側から配置されるため、子要素の幅が足りない場合は、右揃えになります。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML・CSS・JavaScript</title>
    <style>
      .main  { border:1px solid red; padding:4px; }
      
      .flex  { display:flex; flex-direction:row-reverse; }
      .item  { border:1px solid blue; }
      .item1 { flex:none; }
      .item2 { flex:none; }
      .item3 { flex:none; }
    </style>
  </head>
  <body>
    <div class="flex main" style="width:600px;">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
  </body>
</html>

実行結果：


order で、1つずつ順序を指定することもできます。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML・CSS・JavaScript</title>
    <style>
      .main  { border:1px solid red; padding:4px; }
      .flex  { display:flex; }
      .item  { border:1px solid blue; }
      .item1 { order:3;}
      .item2 { order:1;}
      .item3 { order:2;}
    </style>
  </head>
  <body>
    <div class="flex main" style="width:600px;">
      <div class="item item1">あああああ</div>
      <div class="item item2">いいいいい</div>
      <div class="item item3">ううううう</div>
    </div>
  </body>
</html>

実行結果：

Tag

New Article