css3-flex-layout: 基本的な使い方 / フレックスボックスレイアウト

1. フレックスを理解する

2. Flex レイアウト (Flexbox レイアウトとも呼ばれます) を理解する

Flex レイアウト (Flexbox レイアウトとも呼ばれます) は Web ベースの CSS3 レイアウトモードであり、その目的は、さまざまな Web ページ要素をより柔軟かつ適応的に配置することです。フレックスレイアウトは、親コンテナを 1 つ以上の柔軟なアイテムに分割するため、これらのアイテムは特定のルールに従って相互に配置され、それらのアイテムが配置されているコンテナ環境に自動的に適応できます。

フレックスレイアウトでは、親コンテナが「フレックスコンテナ」になり、子要素が「フレックスアイテム」になります。Flex コンテナには、flex-direction と justify-content という 2 つの重要なプロパティがあります。flex-direction は主に主軸上の flex 項目の配置方向を決定するために使用され、justify-content は主軸方向に flex 項目を整列するために使用されます。

これらの基本プロパティに加えて、Flex レイアウトには、align-items、align-content、flex-wrap、order、flex-grow、flex-shrink などの他の多くのプロパティもあります。これらのプロパティは、フレックス項目が交差軸と主軸上でどのように並べられるか、および親コンテナ内でフレックス項目が占めるスペースを定義するために使用されます。

フレックスレイアウトは比較的高度な Web ページレイアウトテクノロジであり、開発者が複雑な Web ページレイアウト効果を簡単に実現するのに役立ち、柔軟性と応答性の特性を備えています。

3. フレックスレイアウトを設定すると、以下のプロパティは無効になります。

シリアルナンバー	属性	述べる
1	浮く
2	クリア
3	垂直整列	フレックスコンテナでのみ、フレックスアイテム内のインライン要素またはテキストを位置合わせするために使用できます。
4	表示:インラインブロック
5	幅	フレックスアイテムに設定可能
6	身長	フレックスアイテムに設定可能
7	マージン: 車	フレックス項目をフレックスコンテナーの水平方向の中央に配置することはできません。これを実現するには justify-content:center を使用する必要があります。
8	フレックス方向: 行	このプロパティはデフォルト値 flex-direction: row に設定されています。主軸の方向を変更する必要がある場合は、flex-direction プロパティを使用する必要があります。
9	フレックスラップ: ナラップ	このプロパティは、デフォルト値 flex-wrap:nowrap に設定されています。改行を行うか改行を行わないようにする必要がある場合は、flex-wrap プロパティを使用する必要があります。
10	justify-content: flex-start	このプロパティはデフォルト値に設定されています。主軸方向の配置を変更する必要がある場合は、justify-content プロパティを使用する必要があります。
注: これは絶対的なものではなく、特定のプロパティ値と Flex アイテムの構造によって異なります。上記のプロパティがまだ正常に動作する場合があります

4. フレックスレイアウトには次の中心的な概念があります。

4.1、フレックスコンテナ(Flex Container): フレックスレイアウトが適用される要素をフレックスコンテナと呼びます。その機能は、Flex アイテムを柔軟にレイアウトできるように、Flex アイテムが配置されるコンテナーを定義することです。

4.2. フレックスアイテム (フレックスアイテム): フレックスコンテナ内のサブ要素はフレックスアイテム (フレックスアイテム) と呼ばれ、各フレックスアイテムはフレックスボックスのプロパティを持ちます。同時に配置方向や配置順序などフレックスコンテナによる制限も受けます。

4.3. フレックス軸 (メイン軸): フレックスコンテナの主な配置方向はフレックス軸です。この軸上に、フレックスコンテナ内のフレックスアイテムが順番に配置されます。

4.4. フレックス交差軸 (Cross Axis): フレックス軸に垂直な軸をフレックス交差軸と呼びます。この軸では、フレックス項目が占めるスペースは制限されており、特定のサイズはフレックスコンテナーのプロパティによって決まります。

4.5. 主軸方向属性 (justify-content): この属性は、フレックス軸上のフレックス項目の配置を制御するために使用されます。これは、フレックス項目を主軸方向でより良く見せることができ、通常は水平方向の配置または垂直方向の配置を実現するために使用されます。

4.6. 交差軸方向属性 (align-items): この属性は、交差軸上の Flex アイテムの配置を制御するために使用されます。これは、フレックス項目を交差軸の方向に見やすくすることができ、通常は水平方向の配置または垂直方向の配置を実現するために使用されます。

4.7. Elastic 要素属性 (flex): この属性は、Flex アイテムが Flex コンテナ内の利用可能なスペースをどのように割り当てるかを制御するために使用されます。このプロパティの値は、Flex アイテムのスケーラビリティを決定します。これにより、Flex コンテナ内の Flex アイテムのサイズが変更され、さまざまな画面サイズやコンテナサイズに適応できます。

5. フレックスコンテナ

フレックスコンテナは、フレックスアイテムを含む親要素です。フレックスコンテナは、要素の表示プロパティを flex または inline-flex に設定することで作成できます。

シリアルナンバー	属性	属性の説明	価値	値の説明
1	画面	コンテナをフレックスレイアウトとして指定する	フレックス	スピンドル水平配置
1	画面	コンテナをフレックスレイアウトとして指定する	インラインフレックス	スピンドル垂直配置
2	フレックス方向	主軸の方向を指定します	行	左から右へ
			行反転	横方向（右から左）
			カラム	垂直方向（上から下）
			列反転	垂直方向（下から上）
3	コンテンツの正当化	主軸の位置合わせを指定します	フレックススタート	開始点付近で揃える
			フレックスエンド	ニアエンドに揃える
			中心	中央揃え
			間のスペース	正当化する
			周囲の空間	間隔をあけた配置
4	アイテムの整列	交差軸上の位置合わせを指定します	フレックススタート	開始点付近で揃える
			フレックスエンド	ニアエンドに揃える
			中心	中央揃え
			ベースライン	ベースラインの位置合わせ
			ストレッチ	ストレッチアライメント
5	コンテンツの整列	複数の軸の位置合わせを指定します（交差軸が複数の軸の場合のみ有効）	フレックススタート	複数行の項目は交差軸の始点に揃えられます
			フレックスエンド	複数行の項目は交差軸の端に揃えられます
			中心	複数行の項目は交差軸上で中央揃えになります。
			間のスペース	複数行の項目は交差軸上に均等に配置され、最初と最後の項目はコンテナーの両端に位置合わせされ、項目間の距離は等しくなります。
			周囲の空間	複数行の項目は交差軸上に均等に配置され、項目間の距離は等しく、コンテナの両端からの最初の項目と最後の項目の間の距離は、他の項目間の距離の半分になります。
			ストレッチ	複数行の項目は、コンテナの高さを満たすように交差軸上に伸びます。
6	フレックスラップ	要素を折り返すかどうかを指定します	ナラップ	改行なし
			包む	改行
			ラップリバース	逆改行
7	フレックスフロー	フレックスコンテナの主軸と横軸の方向と配置を同時に設定するために使用されます flex-direction と flex-wrap の 2 つのプロパティの略称です	行	主軸は水平、始点は左端
			行反転	主軸は水平、始点は右端
			カラム	主軸は垂直であり、始点は上にあります
			列反転	主軸は垂直であり、始点は下にあります
			包む	换行，第一行在上方
			wrap-reverse	换行，第一行在下方
			nowrap	不换行，所有元素排在一行上
			inherit	从父元素继承值
8	align-self	设置单个项目在交叉轴上的对齐方式	auto	默认值，元素继承父元素在交叉轴方向上的对齐方式
			flex-start	元素在交叉轴的起点对齐
			flex-end	元素在交叉轴的终点对齐
			center	元素在交叉轴的中心对齐
			baseline	元素在交叉轴上以基线对齐
			stretch	将元素在交叉轴上拉伸至撑满整个交叉轴

六、Flex项目

Flex项目是Flex容器中的子元素，通过设置该元素的flex属性，即可使其成为一个Flex项目。

序号	属性	属性描述
1	justify-content	控制项目在主轴上的对齐方式
2	align-items	控制项目在交叉轴上的对齐方式
3	flex-direction	控制主轴的方向
4	flex-wrap	控制项目在一行内排列不下时的换行方式
5	align-content	控制多行项目在交叉轴上的对齐方式
6	flex-grow	表示Flex项目在空间分配时的放大比例。 flex-grow的默认值为0，数值越大，空间分配越多。
7	flex-shrink	表示Flex项目在空间不足时的缩小比例。 flex-shrink的默认值为1，数值越大，缩小比例越多，设置为 0 不缩放。
8	flex-basis	表示Flex项目在空间分配前的初始大小。 flex-basis的默认值为auto，可以设置具体数值或百分比。
9	order	表示Flex项目在容器中的排列顺序。 order的默认值为0，数值越小，排列越靠前。可以使用负数值。
10	flex	是flex-grow, flex-shrink 和flex-basis的缩写，可以一次性设置以上三个属性是flex-gflex的默认值为0 1 auto。

七、DEMO / vue3.3 + ts

7.1、水平、垂直居中

<template>
  <div class="container">
    <!-- 水平、垂直 居中 -->
    <div class="flex">
      <div class="flex_item"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.container{
  .flex{
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    width: 200px;
    height: 200px;
    background: #ff0000;
    &_item{
      width: 50px;
      height: 50px;
      background: #b3de1b;
    }
  }
}
</style>

7.2、flex-shrink

<template>
  <div class="container">
    <div class="flex">
      <div class="flex_item">1</div>
      <div class="flex_item">2</div>
      <div class="flex_item">3</div>
      <div class="flex_item">4</div>
      <div class="flex_item">5</div>
      <div class="flex_item">6</div>
      <div class="flex_item">7</div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.container{
  .flex{
    display: flex;
    width: 200px;
    height: 200px;
    background: #ff0000;
    &_item{
      width: 50px;
      height: 50px;
      background: #b3de1b;
      flex-shrink: 0; // 表示Flex项目在空间不足时的缩小比例。flex-shrink的默认值为1，数值越大，缩小比例越多，设置为 0 不缩放 。
    }
  }
}
</style>

7.3、flex-wrap: wrap; / 换行

7.4、 align-content: flex-start; / 多行项目对齐于交叉轴的起始位置

八、过程记录

8.1、display flex 和 inline-flex区别

display	flex	inline-flex
布局方向不同	display:flex是主轴水平方向排列	display:inline-flex是主轴垂直方向排列
元素占用空间不同	display:flex元素会占据一行（即父元素宽度）	display:inline-flex元素只占据它所包含内容的空间
默认属性不同	display:flex默认属性是flex-direction:row	display:inline-flex默认属性是flex-direction:row-reverse
元素排列方式不同	display:flex元素默认排列方式为flex-start	display:inline-flex元素默认排列方式为baseline