フレックスボックス格納式レイアウト box_html/css_WEB-ITnose

Flexbox (フレキシブル レイアウト ボックス) は、CSS3 の新しいレイアウト モードであり、最新のネットワークにおけるより複雑な Web ページ要件向けに設計されています。

Flexbox は Flex コンテナと Flex プロジェクトで構成されます。要素の表示属性を flex または inline-flex に設定すると、flex に設定されたコンテナはブロックレベルの要素としてレンダリングされ、inline-flex に設定されたコンテナはインライン要素としてレンダリングされます。 。

例: ここでは、クラス名 flex-container の要素がフレックス コンテナとして設定されています

.flex-container {

display: -webkit-flex }

inフレックス コンテナ 各子要素はフレックス アイテムです。フレックス項目はいくつでも存在できます。フレックス コンテナの外部およびフレックス プロジェクト内のすべての要素は影響を受けません。

簡単に言うと、Flexbox は、フレックス コンテナー内のフレックス項目をどのようにレイアウトするかを定義します。

フレックス ライン フレックス ライン

フレックス アイテムは、フレックス コンテナ内のフレックス ラインに沿って配置されます。通常、フレックス コンテナごとにフレックス行は 1 つだけ存在します。 デフォルトの伸縮行は左から右です

例:

 1 <div class="flex-container"> 2 <div class="flex-item">flex item 1</div> 3 <div class="flex-item">flex item 2</div> 4 </div> 5  6 样式： 7  8 .flex-container { 9 display: -webkit-flex;10 display: flex;11 width: 300px;12 height: 240px;13 background-color: Silver;14 }15 16 .flex-item {17 background-color: DeepSkyBlue;18 width: 100px;19 height: 100px;20 margin: 5px;21 }

レンダリング:

Add

<div class="flex-item">flex item 3</div>

<div class="flex-item">flex item 4</div><br /><br />伸缩项目的宽度超过了 伸缩容器的宽度，伸缩容器的宽度不会改变，伸缩项目的宽度减小<br /><br /><br /><br />

 1 <div class="flex-container"> 2 <div class="flex-item">flex item 1</div> 3 <div class="flex-item">flex item 2</div> 4 </div> 5  6  7 CSS样式 8 .flex-container { 9    direction: rtl;10     display: -webkit-flex;11     display: flex;12     width: 300px;13     height: 240px;14     background-color: Silver;15     16 }17 18 .flex-item {19     background-color: DeepSkyBlue;20     width: 100px;21     height: 100px;22     margin: 5px;23 }

効果:

線を右から左に伸ばす、テキストまた、右から左へ

抽象的な記述パターンを記述するために、Flexbox は主軸と交差軸の概念を使用します。フレックス行は主軸に従います。横軸は主軸に対して垂直です。

flex-direction フレックス フローの方向

デフォルト値行

もう一度思い出してください、デフォルトは左から右、上から下です。他の値は次のとおりです:

row-reverse: スピンドルの開始点とスピンドルの終了点を交換します。書き込みモードが左から右の場合、フレックス項目は左から右の順に表示されます。

コラム: 主軸と副軸を交換します。書記体系が縦書きの場合、フレックス項目も縦書きで表示されます。

column-reverse: 列と同じですが、方向が逆です。

justify-content 主軸の位置合わせ

主軸上の伸縮アイテムの位置を調整するために使用されます。可能な値は次のとおりです:

flex-start (デフォルト)

flex-end

center

space-between

space-around

align-items 交差軸の配置

交差軸位置決め方式。可能な値は次のとおりです:

flex-start (デフォルト)

flex-end

center

baseline

stretch

flex-wrap フレックスラインラップ

フレックスコンテナに複数のフレックスラインを作成します。このプロパティは次の値を受け入れます:

nowrap (デフォルト)

wrap

wrap-reverse

align-content stackstretch row

フレックス行を整列させ、値を受け入れます:

stretch (デフォルト) )

flex-start

flex-end

center

space-between

space-around

flex-flowは、flex-directionとflex-wrapの略称です。