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;}  

flex-wrap

rrree

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

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

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

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

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

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

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

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

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

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

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 无任何影响。

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