CSS3 Flexレイアウト Flexboxの詳しい説明properties_html/css

原文: CSS3 Flexbox Properties のビジュアルガイド

Flex レイアウトは正式には CSS Flexble Box と呼ばれます レイアウトモデルは、コンテナ内の要素の配置、方向、順序を改善するために CSS3 です。動的または不定サイズの新しいレイアウトモデルです。 Flex コンテナの主な機能は、子要素を調整して、さまざまな画面サイズで最適な方法で適切なスペースを埋める機能です。

多くのデザイナーや開発者は、要素の配置が簡単であるため、多くの複雑なレイアウトを非常に少ないコードで実装でき、開発プロセスが簡素化できると感じています。 Flex レイアウトアルゴリズムは方向に基づいており、水平または垂直のブロックやインラインレイアウトとは異なります。この Flex レイアウトは小規模なアプリケーションコンポーネントで使用できますが、大規模なレイアウトを処理するために CSS3 グリッドレイアウトモデルが登場しています。

この記事では、flex の各属性がレイアウトにどのような影響を与えるかを主に説明します。

1. 基本概念:

Flexbox プロパティの説明を始める前に、Flexbox モデルを簡単に紹介しましょう。 Flex コンテナ (flex-container) と呼ばれる親コンテナとその直接の子要素と呼ばれます。 フレックスアイテム (flex-item)。以下では「コンテナ」および「アイテム」と呼ばれます。

上の画像では、Flex コンテナとその子要素を説明するために使用される 属性と用語 を確認できます。それらの意味を理解するには、W3C の公式ドキュメントを読むことができます。

フレックスコンテナには、水平主軸と交差軸という 2 つの参照軸があります。

主軸の開始位置はメインスタート、主軸の終了位置はメインエンドと呼ばれます。

クロス軸の開始位置はクロススタートと呼ばれ、終了位置はクロスエンドと呼ばれます。直接の子要素「アイテム」は主軸に沿って配置されます。

単一のアイテムが占有します。主軸のスペースはメインサイズと呼ばれ、交差軸のスペースが占有されるのはクロスサイズと呼ばれます。

Flexbox は、2009 年に W3C によって提案された新しいレイアウトソリューションです。ここでは、2014 年 10 月の最新規格が使用されており、その最新のブラウザーがサポートされています

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

Safari 6.1+ (接頭辞-webkit-)

Android 4.4+

iOS 7.1+ (接頭辞-webkit-)

2、使用法:

flex布局首先使用表示属性を設定するHTML の親要素で:

.flex-container {    display: -webkit-flex; /* Safari */    display: flex;}

ログイン後にコピー

または、インライン要素のようにしたい場合は、次のように記述できます:

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

ログイン後にコピー

注: これは、親コンテナに設定される唯一の属性です。直接の子要素は自動フレックス項目になります。

3. フレックスボックスコンテナの属性:

flex-direction:row(默认值) | row-reverse | column | column-reverse;

ログイン後にコピー

この属性は、フレックスコンテナ内での Flex アイテムの配置方法を指定し、フレックスコンテナの主軸方向を設定します。また、それら (アイテム) は 2 つのメイン軸に配置されます。行として水平方向に配置するか、列として垂直方向に配置するなどの方向。

値:

.flex-container {  -webkit-flex-direction: row; /* Safari */  flex-direction:         row;}

ログイン後にコピー

行方向は、フレックス項目がコンテナ内で左から右に連続して積み重ねられることを示します。

.flex-container {  -webkit-flex-direction: row-reverse; /* Safari */  flex-direction:         row-reverse;}

ログイン後にコピー

行反転方向は、フレックス項目が右から左に積み重ねられることを示します。

.flex-container {  -webkit-flex-direction: column; /* Safari */  flex-direction:         column;}

ログイン後にコピー

列の方向は、フレックス項目が列内で上から下に積み重ねられることを示します

.flex-container {  -webkit-flex-direction: column-reverse; /* Safari */  flex-direction:         column-reverse;}

ログイン後にコピー

column-reverse 方向は次のことを示しますフレックス項目は、列内で下から上に積み上げられています

 flex-wrap:nowrap(默认值) | wrap | wrap-reverse;

ログイン後にコピー

当初、Flexbox のアイデアは、すべての項目が線 (軸) 上に配置され、flex- Wrap プロパティは、コンテナがその Arrange アイテムを 1 つ以上の行でラップするかどうかを制御し、新しい行が積み重ねられる方向を制御します。

値:

.flex-container {  -webkit-flex-wrap: nowrap; /* Safari */  flex-wrap:         nowrap;}

ログイン後にコピー

flex アイテムは一列に配置され、コンテナーの幅に合わせて拡大縮小されます。

.flex-container {  -webkit-flex-wrap: wrap; /* Safari */  flex-wrap:         wrap;}

ログイン後にコピー

項目 (フレックス項目) は複数の行に表示され、必要に応じて左から右または上から下に配置できます。

.flex-container {  -webkit-flex-wrap: wrap-reverse; /* Safari */  flex-wrap:         wrap-reverse;}

ログイン後にコピー

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

ログイン後にコピー

この属性は、前者のパラメータは flex-direction を設定し、後者のパラメータは flex-wrap を設定します。

価値観：

rreee

default値：rowarp

rreee弾力性がないか、アイテムは柔軟ですが最小幅に達しています。このプロパティは、コンテナー内の残りのスペースの割り当てを定義できます。

値:

.flex-container {  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */  flex-flow:         <flex-direction> || <flex-wrap>;}

ログイン後にコピー

すべてのアイテムはコンテナの左側に配置されます

 justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;

ログイン後にコピー

すべてのアイテムを左に揃えますコンテナの右側を揃えます

コンテナ内のすべてのアイテムを中央に揃えます

.flex-container {  -webkit-justify-content: space-between; /* Safari */  justify-content:         space-between;}

ログイン後にコピー

第一个和最后一个项目向容器的边界对齐，剩余的空间各个项目等分

.flex-container {  -webkit-justify-content: space-around; /* Safari */  justify-content:         space-around;}

ログイン後にコピー

所有的项目等分剩余的容器空间，包括第一个和最后一个项目（所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍）。

 align-items:flex-start | flex-end | center | baseline | stretch(默认值);

ログイン後にコピー

定义项目在交叉轴上的对齐方式，交叉轴与当前的轴线有关系，与justify-content很相似，只不过是垂直方向的；这属性为所有的项目设置默认的交叉轴上的对齐方式，包括匿名的。

values：

.flex-container {  -webkit-align-items: stretch; /* Safari */  align-items:         stretch;}

ログイン後にコピー

项目会填充容器的整个高或者宽(fill the whole height )，从容器交叉轴的起点到交叉轴的结束点。

.flex-container {  -webkit-align-items: flex-start; /* Safari */  align-items:         flex-start;}

ログイン後にコピー

项目会堆放在容器交叉轴的起始位置（cross start ）。

.flex-container {  -webkit-align-items: flex-end; /* Safari */  align-items:         flex-end;}

ログイン後にコピー

项目会堆放在容器交叉轴的结束位置（cross end ）。

.flex-container {  -webkit-align-items: center; /* Safari */  align-items:         center;}

ログイン後にコピー

项目会堆放在容器交叉轴的居中位置（ center of the cross axis ）

.flex-container {  -webkit-align-items: baseline; /* Safari */  align-items:         baseline;}

ログイン後にコピー

所有项目的基线会对齐

基线？不知道基线是什么请戳这里-->基线是什么?

 align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);

ログイン後にコピー

当交叉轴上还有多余的空间时它定了多行的对齐方式，类似justify-content在主轴上对齐所有项目的方式一样。

values：

.flex-container {  -webkit-align-content: stretch; /* Safari */  align-content:         stretch;}

ログイン後にコピー

每一行的项目后面等比分配了交叉轴上的多余空间。

.flex-container {  -webkit-align-content: flex-start; /* Safari */  align-content:         flex-start;}

ログイン後にコピー

项目在容器的交叉轴起始点上堆放在一起。

.flex-container {  -webkit-align-content: flex-end; /* Safari */  align-content:         flex-end;}

ログイン後にコピー

项目在容器的交叉轴结束点上堆放在一起。

.flex-container {  -webkit-align-content: center; /* Safari */  align-content:         center;}

ログイン後にコピー

项目的行被堆放在容器的交叉轴线中间。

.flex-container {  -webkit-align-content: space-between; /* Safari */  align-content:         space-between;}

ログイン後にコピー

与justify-content类似，项目的行距离在容器的交叉轴线上被等分，第一行和末尾的一行与容器的边缘对齐。

.flex-container {  -webkit-align-content: space-around; /* Safari */  align-content:         space-around;}

ログイン後にコピー

与justify-content类似，项目的行等分了容器的交叉线上的剩余空间，第一行和最后一行同样也得到了一些，它们之间的间隔比首行和末行到容器边界的间隔大一倍。

注意：这个属性仅仅当容器中有多行的项目时有效，如果所有项目仅仅占一行，那这个属性对布局没有任何影响。

4、Flexbox 项目属性

<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></span>

ログイン後にコピー

order属性控制容器的直接子元素在容器中的顺序，默认在容器中这些项目是以该数字递增的方式排列的。

values:

values:.flex-item {  -webkit-order: <integer>; /* Safari */  order:         <integer>;}

ログイン後にコピー

该属性可以很简单的控制项目的顺序，而不用在HTML代码里面做调整。这个整形值可以为负数，默认值是 0。

<span style="font-size:14px;">flex-grow: <number></span>

ログイン後にコピー

该属性指定项目的生长因素，它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。
values:

.flex-item {  -webkit-flex-grow: <number>; /* Safari */  flex-grow:         <number>;}

ログイン後にコピー

当所有的项目的flex-grow值相等的时候它们的size相同。

第二个项目占用了更多的剩余空间。

默认值是：0
注意：负数在这个属性中是没有用的

flex-shrink: <number>

ログイン後にコピー

该属性指定了项目的收缩因素，它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

values:

.flex-item {  -webkit-flex-shrink: <number>; /* Safari */  flex-shrink:         ;}

ログイン後にコピー

默认情况下，所有的项目都会收缩，但是当我们设置该属性的值为0的时候，项目会保持原有的大小。

默认值是：1
注意：负数在这个属性中是没有用的

flex-basis：auto | <width>

ログイン後にコピー

该属性的值和width和height的取值一样，在 flex factors分配剩余空间之前指定项目的初始的大小。

values:

.flex-item {  -webkit-flex-basis: auto | <width>; /* Safari */  flex-basis:         auto | <width>;}

ログイン後にコピー

默认值：auto

flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

ログイン後にコピー

该属性是flex-grow, flex-shrink 和flex-basis的缩写形式，同时属性值也有简写：auto表示(1,1,auto)，none表示(0,0,auto)

values:

.flex-item {  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];}

ログイン後にコピー

注意： W3C鼓励使用flex的简写形式，因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。

align-self:auto | flex-start | flex-end | center | baseline | stretch;

ログイン後にコピー

该属性和容器的align-items属性有同样的作用，它是用在单一的项目上的，可以完全压倒容器中align-items定义的对齐方式。
values:

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

ログイン後にコピー

注意：auto 表示项目会使用父元素（容器）的align-items的值，如果该项目没有父元素的话align-self的值是stretch。

flex items值得注意的是：float、clear、vertical-align这些属性对于项目(flex item)会失效。