フロントエンドの基本 (2) クイック レイアウト アーティファクト Flexbox レイアウト_html/css_WEB-ITnose

前回の記事で、CSS レイアウトの従来のレイアウト方法は、主に表示属性 + 位置属性 + フロート属性に依存するボックス モデルに基づいていることがわかりました。このボックス モデルは、一部の複雑なレイアウトでは解決がより困難になるため、新しいレイアウト方法が登場しました。

2009 年、W3C は、さまざまなページ レイアウトを簡単、完全、レスポンシブに実現できる新しいソリューション、Flexbox レイアウト (エラスティック レイアウト) を提案しました。フレックス レイアウト モデルは、ブロック モデルとインライン モデルのレイアウト計算がブロックとインラインのフロー方向に依存するという点で、ブロック モデル レイアウトやインライン モデル レイアウトとは異なります。

そして React Native も Flex レイアウトを使用するため、Flex を学習することはクライアントの開発に大きな利益をもたらします。

基本的な概念とプロパティ

Flexbox のレイアウトはフレックスの方向に依存します。簡単に言えば、Flexbox は単純なプロパティではなく、レイアウト モジュールです。 Flex レイアウトを使用する要素は Flex コンテナ (フレックス コンテナ) と呼ばれ、そのすべての子要素 ​​(フレックス アイテム) は自動的にコンテナ メンバーになります。

Flexbox レイアウトは、Android 開発における LinearLayout レイアウトに非常に似ていますが、LinearLayout よりも強力です。 LinearLayoutと同様に、Flexboxにも主軸（メイン軸）と副軸（クロス軸）の2方向のレイアウトがあり、簡単に言うとLinearLayoutの水平レイアウトと垂直レイアウトとして理解できます。主軸の開始位置（境界線との交点）をメインスタート、終了位置をメインエンド、交差軸の開始位置をクロススタート、終了位置をクロスエンドといいます。デフォルトでは、項目は主軸に沿って配置されます。 1 つのアイテムが占める主軸のスペースをメイン サイズと呼び、1 つのアイテムが占める横軸のスペースをクロス サイズと呼びます。

属性

属性は、フレックス コンテナ属性とフレックス アイテム属性に分かれています。親コンテナと子要素に対応します。

フレックスコンテナのプロパティ

以下はフレックスコンテナのプロパティ

• フレックスコンテナのプロパティ
• order
• flex-wrap
• flex-flow
• justify-content
• align-content
• align-items

flex-direction プロパティ

flex-direction プロパティは、主軸の方向 (つまり、項目の配置方向) を決定します。 LinearLayout のverticalまたはhorizo​​ntalと似ています。

flex-direction: row | row-reverse | column | column-reverse

4 つの値から選択できます:

• row (デフォルト値): 主軸は水平で、開始点は左端にあります。
• row-reverse: 主軸は水平であり、開始点は右端にあります。
• column: 主軸は垂直であり、始点は上端にあります。
• column-reverse: 主軸は垂直であり、開始点は下端にあります。

order 属性

デフォルトでは、サブ要素はドキュメント フローの順序で配置され、order 属性は配置の順序を制御できます。負の値が最初に、正の値が後に続きます。災害を小さいものから大きいものへと順番に並べています。フレックス ボックスが LinearLayout よりも強力である理由は、一部のプロパティの方が強力であるためであり、順序もその 1 つであるためです。

flex-wrap 属性

デフォルトでは、Flex には LinearLayout と同様に行の折り返しがありませんが、flex-wrap 属性は行の折り返しをサポートできます。これも LinearLayout より優れており、次の 3 つの値があります:

rrree

• nowrap: 行の折り返しなし
• wrap: 行を法線方向に折り返します
• wrap-reverse: 行を逆方向に折り返します

flex -flow 属性

flex-flow プロパティは、flex-direction プロパティと flex-wrap プロパティの略称で、デフォルト値は row nowrap です。

flex-wrap: nowrap | wrap | wrap-reverse;

justify-content プロパティ

justify-content プロパティは、主軸上の項目の配置を定義します。

flex-flow: <flex-direction> || <flex-wrap>;

• flex-start (デフォルト): 左揃え
• flex-end: 右揃え
• center: 中央揃え
space-between: 項目間の間隔が等しくなるように両端を揃えます。
スペースアラウンド: 各アイテムは両側に等間隔に配置されます。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。

align-items プロパティ

align-items プロパティは、項目を第 2 軸上にどのように配置するかを定義します。

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start: 交差軸の開始点を揃えます。
flex-end: 交差軸の終点を揃えます。
center: 交差軸の中点を揃えます。
baseline: アイテムのテキストの最初の行のベースライン配置。
stretch (デフォルト値): アイテムの高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナーの高さ全体を占めます。

align-content プロパティ

align-content プロパティは、複数の軸の位置合わせを定義します。プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。

りー

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

子元素属性

以下几个属性设置在子元素上。

• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。一张图看懂。跟 LinearLayout中的 weight属性一样。

.item {  flex-grow: <number>; /* default 0 */}

如果所有项目的 flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {  flex-shrink: <number>; /* default 1 */}

如果所有项目的 flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，子元素占据的 main size主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即子元素的本来大小。

.item {  flex-basis: <length> | auto; /* default auto */}

flex属性

flex属性是 flex-grow, flex-shrink和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self属性

align-self属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 align-items属性。默认值为 auto，表示继承父元素的 align-items属性，如果没有父元素，则等同于 stretch。

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

该属性可能取6个值，除了 auto，其他都与 align-items属性完全一致。

实例

属性基本都讲完了，下面进入实战。百度前端学院的其中一个任务：

• 学习如何flex进行布局，学习如何根据屏幕宽度调整布局策略。
• 屏幕宽度小于 640px 时，调整 Flexbox 的属性以实现第四个元素移动到最前面的效果，而不要改动第一个元素的边框颜色与高度实现效果图。

效果图

分析：

1. 屏幕宽度小于640px时，调整主轴对齐方式justify-content属性为space-between，在副轴对齐方式align-items为center
2. 屏幕宽度大于640px，要有换行，并且动态调整 order属性，调整第四个子元素的排列位置。并且调整align-items为flex-start;

效果图和 代码

总结

可以看到， Flex box布局方式相比传统的盒模型布局方式要快速很多，对于一些复杂的页面也可以很快速的开发。而且由于 React Native的支持并使用，相信会有跟多开发者使用这种布局方式进行开发。