Flexbox_html/css_WEB-ITnose の完全ガイド

Flexbox 完全ガイド

私はこの記事のオリジナルの著者ではなく、優れた記事の単なるポーターです。元のアドレス Flexbox 完全ガイド

フレックス コンテナに適用される属性

display
この属性は、値に応じてインラインまたはブロック フレックス コンテナとして定義されるフレックス コンテナを定義します。この属性が適用される要素は、そのすべての子要素に対してフレックス コンテキストを作成します。

.container {  display: flex; /* or inline-flex */}

CSS3 の複数列レイアウトはフレックス コンテナーには影響を与えないことに注意してください。

flex-direction

この属性は主軸を確立し、フレックス コンテナ内のフレックス アイテムの配置方向を指定します。フレックスボックスは一方向のレイアウトの概念であり、フレックス項目は水平の行または垂直の列に沿って優先されると考えることができます。

.container {  flex-direction: row | row-reverse | column | column-reverse;}  

row (デフォルト): LTR コンテキストでは左から右、RTL コンテキストでは右から左。

行反転: LTR コンテキストでは右から左、RTL コンテキストでは左から右。

列: 行と似ていますが、上から下へ。

column-reverse: row-reverse と似ていますが、下から上へ。

flex-wrap

デフォルトでは、すべての flex 項目は行 (行または列、以下同様) 内に留まろうとします。この属性を使用すると、必要に応じてフレックス項目で行または列を折り返すことができます。ここで、新しい行または列がどこから始まるかは、flex-direction によって決まります。

rrree

nowrap (デフォルト): 単一行。 LTR コンテキストでは左から右、RTL コンテキストでは右から左。

折り返し: 複数行。 LTR コンテキストでは左から右、RTL コンテキストでは右から左。

wrap-reverse: 複数行。 LTR コンテキストでは右から左、RTL コンテキストでは左から右。

flex-flow

このプロパティは、flex-direction と flex-wrap の略称プロパティで、フレックス コンテナの主軸と交差軸を定義します。デフォルト値は行ナラップです。

.container{  flex-wrap: nowrap | wrap | wrap-reverse;}

justify-content

このプロパティは、主軸に沿った配置を定義します。これは、すべてのフレックス項目が配置された後に残っている空きスペースを処理するために使用されます。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

flex-start (デフォルト値): すべての flex 項目は行の先頭に揃えられます。

flex-end: すべてのフレックス項目は行の終わりに向かって整列されます。

center: すべてのフレックス項目が線の中央に沿って配置されます。

space-between: すべてのフレックス項目は行に沿って均等に配置され、最初の項目は行の先頭に配置され、最後の項目は行の最後に配置されます。

スペースアラウンド: すべてのフレックス項目がラインに沿って均等に配置され、各項目の周囲の空白スペースが均等になります。すべての項目の両側にまったく同じ量の空き領域があるため、各項目の周囲の空き領域が完全に等しいようには見えないことに注意してください。

align-items

この属性は、現在の行の交差軸に沿ったフレックス項目レイアウトのデフォルトの動作を定義します。これは、交差軸の justify-content と考えてください。

.container {  justify-content: flex-start | flex-end | center | space-between | space-around;}

flex-start: 交差軸に沿ったマージン エッジは、交差軸の開始位置に沿って整列します。

flex-end: 交差軸に沿ったマージンエッジは、交差軸の終了位置に沿って位置合わせされます。

center: すべてのフレックス項目が交差軸の中心に沿って配置されます。

ベースライン: すべてのフレックス項目はベースラインに沿って配置されます。

ストレッチ (デフォルト): コンテナーを満たすようにストレッチします (依然として min-width/max-width によって制限されます)。

align-content

この属性は、交差軸に空白スペースがある場合に、フレックス コンテナ内のすべての行の配置を制御するために使用されます。 justify-content がフレックス項目を主軸に沿って配置する方法を制御する方法と同様です。
注: 単一行の場合、この属性は有効になりません。

.container {  align-items: flex-start | flex-end | center | baseline | stretch;}

flex-start: すべての行がコンテナの開始位置に揃えられます。

flex-end: すべての行がコンテナの最後に揃えられます。

center: すべての線がコンテナの中心に沿って整列します。

space-between: すべての行は均等に分散され、最初の行はコンテナーの先頭にあり、最後の行はコンテナーの最後にあります。

スペースアラウンド: すべての行が均等に配置され、各行の周囲の空白スペースが均等になります。

stretch (デフォルト): 残りのスペースを埋めるためにすべての線が引き伸ばされます。

フレックス項目に適用されるプロパティ

order

デフォルトでは、すべてのフレックス項目はソースコードで定義された順序でレイアウトされます。ただし、order 属性は、フレックス コンテナに表示されるフレックス アイテムの優先順位を制御します。

.item {  order: <integer>;}

flex-grow

该属性赋予 flex item 生长（grow）的能力。它接受一个无单位的值，并将其作为比例值，表示在 flex container 中，这个 flex item 能够占有多大比例的可用空间。
如果所有的 flex item 的 flex-grow 属性都设置为1，那么 container 的剩余空间将被均匀的分配给所有 flex item。如果当中有一个 item 的 flex-grow 属性设置为2，那么 这个 item 将占有2倍于其他 item 占有的可用空间。

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

负值是非法取值。

flex-shrink
该属性赋予 flex item 在必要的情况下收缩的能力。

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

负值是非法取值。

flex-basis
该属性用于在分配剩余空间之前定义 flex item 的默认尺寸大小。它的取值可以为一个绝对长度值（比如 20%，5rem，等）或者是一个关键字。auto 关键字表示根据 flex item 自身的 width 和 height 属性取值确定。 content 关键字表示根据 flex item 的 content 来确定，但是目前并没有得到很好的支持。

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

如果该属性取值为0，那么在该 flex item 的 content 周围的额外空间将不被计算在内。如果取值为 auto，那么 flex item 的大小将根据 flex-grow 的取值来确定。可以参考这张图。

flex
该属性为 flex-grow, flex-shrink 和 flex-basis 的混合简写方式。 其中第二个和第三个参数（flex-shrink 和 flex-basis）为可选参数。该属性的默认值为 0 1 auto。

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

align-self

该属性可以为每个 flex item 指定对齐方式。我们可以通过该属性修改 flex item 默认的或者由 align-items 指定的对齐方式。它的取值说明参考 align-items 的取值说明。

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

注意，float，clear 和 vertical-align 对 flex item 无任何影响。

更多实例请参考原文例子。