CodeGym /コース /Frontend SELF JA /Flexboxの基本

Flexboxの基本

Frontend SELF JA

レベル 17 , レッスン 1

使用可能

5.1 Flexboxの主な概念

Flexbox (Flexible Box Layout)はCSSの強力なレイアウトシステムで、コンテナ内の要素を柔軟かつ効率的に配置および整列させる方法を提供します。Flexboxは特に複雑なレイアウトやレスポンシブデザインの作成に便利です。ここで、Flexboxの基本、Flexコンテナや要素の作成、およびdisplay: flex;プロパティの使用について見ていきましょう。

Flexboxの主な概念

Flexboxは2つの主要なコンポーネントから成ります:

Flexコンテナ: Flex要素を含む親要素。
Flex要素: Flexコンテナ内の子要素で、Flexboxのルールに従って整列および配置されます。

Flexコンテナ

Flexコンテナはdisplay: flex;またはdisplay: inline-flex;プロパティを使って作成されます。Flexコンテナは子要素 (Flex要素) の配置を管理し、整列および配置のための多くのオプションを提供します。

CSS

    
      .container {
        display: flex; /* または inline-flex */
      }

使用例:

CSS

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

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

HTML

    
      <div class="container">
        <div class="item">アイテム 1</div>
        <div class="item">アイテム 2</div>
        <div class="item">アイテム 3</div>
      </div>

コードの説明:

.container: display: flex;を使って作成されたFlexコンテナ。このコンテナ内では、要素がFlexboxのルールに従って整列および配置されます。
.item: Flexコンテナの子要素であるFlex要素

5.2 Flexコンテナのプロパティ

display: flex;プロパティは要素をFlexコンテナとして定義します。このコンテナの子要素は自動的にFlex要素となり、Flexboxのルールに従い始めます。

display: flex;

ブロック状のFlexコンテナを作成します。Flexコンテナはブロック要素として振る舞い、親要素の利用可能な幅をすべて占めます。

CSS

    
      .container {
        display: flex;
      }

display: inline-flex;

行内のFlexコンテナを作成します。Flexコンテナは行内要素として振る舞い、必要な幅だけを占め、他の行内要素と隣接して配置されることができます。

CSS

    
      .inline-container {
        display: inline-flex;
      }

使用例:

CSS

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

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

HTML

    
      <div class="inline-container">
        <div class="item">アイテム 1</div>
        <div class="item">アイテム 2</div>
        <div class="item">アイテム 3</div>
      </div>

      <div class="inline-container">
        <div class="item">アイテム 4</div>
        <div class="item">アイテム 5</div>
      </div>

コードの説明:

inline-container — display: inline-flex;で作成されたFlexコンテナ。このコンテナ内では、要素がFlexboxのルールに従って整列および配置されます。コンテナは行内要素として振る舞い、互いに隣接して配置されます。

5.3 Flex要素のプロパティ

1. flexプロパティは、flex-grow, flex-shrink, およびflex-basisを設定するための省略形です。利用可能なスペースを埋めるために、Flex要素がどのように伸縮するかを制御することができます。

構文:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }

使用例:

CSS

    
      .item {
        flex: 1;
      }

2. orderプロパティ

orderプロパティは、Flexコンテナ内でFlex要素が配置される順序を決定します。デフォルトでは、すべての要素はorder: 0;の値を持っています。

値

整数。小さい値の要素が大きい値の要素よりも前に配置されます。

構文:

    
      .element {
        order: value;
      }

使用例:

CSS

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

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

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }

HTML

    
      <div class="container">
        <div class="item-1">アイテム 1</div>
        <div class="item-2">アイテム 2</div>
        <div class="item-3">アイテム 3</div>
      </div>

コードの説明:

.item-1: order: 2の値を持っているため、order: 1の要素の後に配置されます
.item-2: order: 1の値を持っているため、最初に配置されます
.item-3: order: 3の値を持っているため、最後に配置されます

前へ前のレッスン

次へ次のレッスン

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