軸の方向

Frontend SELF JA

レベル 17 , レッスン 2

使用可能

6.1 flex-directionプロパティ

Flexboxは、柔軟で強力なツールを提供して、レスポンシブなレイアウトを作成できるよ。このシステムの重要な部分は、Flex要素がFlexコンテナ内でどのように配置されるかを決定するレイアウトの軸だよ。以下では、軸の方向とFlex要素のオーバーフロー時の振る舞いを制御するflex-directionとflex-wrapのプロパティを詳しく見てみよう。

flex-directionプロパティは、Flex要素が配置される主軸の方向を決定するよ。この方向は水平か垂直、または正方向か逆方向を含むよ。

値:

row: 主軸が左から右への水平方向（デフォルト値）
row-reverse: 主軸が右から左への水平方向
column: 主軸が上から下への垂直方向
column-reverse: 主軸が下から上への垂直方向

使用例

1. 要素が水平に配置される:

CSS

    
      .container-row {
        display: flex;
        flex-direction: row;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

HTML

    
      <div class="container-row">
        <div class="item">要素 1</div>
        <div class="item">要素 2</div>
        <div class="item">要素 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">要素 1</div>
        <div class="item">要素 2</div>
        <div class="item">要素 3</div>
      </div>

2. 要素が垂直に配置される:

CSS

    
      .container-column {
        display: flex;
        flex-direction: column;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-column-reverse {
        display: flex;
        flex-direction: column-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

HTML

    
      <div class="container-column">
        <div class="item">要素 1</div>
        <div class="item">要素 2</div>
        <div class="item">要素 3</div>
      </div>

      <div class="container-column-reverse">
        <div class="item">要素 1</div>
        <div class="item">要素 2</div>
        <div class="item">要素 3</div>
      </div>

コードの説明:

.container-row: 要素が左から右への水平に配置される
.container-row-reverse: 要素が右から左への水平に配置される
.container-column: 要素が上から下への垂直に配置される
.container-column-reverse: 要素が下から上への垂直に配置される

6.2 flex-wrapプロパティ

flex-wrapプロパティは、Flex要素が1行に収まらない場合に新しい行/列に折り返すかどうかを決定するよ。これは、デバイスや画面に応じてコンテナのサイズが変化するレスポンシブなレイアウトを作成するのに特に便利だよ。

値

nowrap: 要素は折り返されずに1行/列に配置される（デフォルト値）
wrap: 必要に応じて要素が新しい行/列に折り返される
wrap-reverse: 要素が逆順で新しい行/列に折り返される

使用例

nowrapの値:

要素は折り返されずに1行/列に配置される（デフォルト値）。

CSS

    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }

HTML

    
      <div class="container-nowrap">
        <div class="item">要素 1</div>
        <div class="item">要素 2</div>
        <div class="item">要素 3</div>
        <div class="item">要素 4</div>
      </div>

wrapの値:

必要に応じて要素が新しい行/列に折り返される。

CSS

    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }

HTML

    
      <div class="container-wrap">
        <div class="item">要素 1</div>
        <div class="item">要素 2</div>
        <div class="item">要素 3</div>
        <div class="item">要素 4</div>
      </div>

wrap-reverseの値:

要素が逆順で新しい行/列に折り返される。

CSS

    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }

HTML

    
      <div class="container-wrap-reverse">
        <div class="item">要素 1</div>
        <div class="item">要素 2</div>
        <div class="item">要素 3</div>
        <div class="item">要素 4</div>
      </div>

コードの説明:

.container-nowrap: Flex要素はコンテナの境界を超えても1行に配置される
.container-wrap: Flex要素は1行に収まらない場合に新しい行に折り返される
.container-wrap-reverse: Flex要素は逆順で新しい行に折り返される

6.3 flex-directionとflex-wrapの使用

flex-directionとflex-wrapのプロパティをflex-flowショートハンドプロパティで組み合わせて使用することができるよ。このプロパティで軸の方向と要素の折り返しを同時に指定できる。

構文:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

使用例:

CSS

    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }

HTML

    
      <div class="container">
        <div class="item">要素 1</div>
        <div class="item">要素 2</div>
        <div class="item">要素 3</div>
        <div class="item">要素 4</div>
        <div class="item">要素 5</div>
      </div>

コードの説明:

.container: flex-direction: row;とflex-wrap: wrap;を組み合わせて使用するFlexコンテナで、要素は必要に応じて水平に配置され新しい行に折り返される

前へ前のレッスン

次へ次のレッスン

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION