CSS Flexbox の詳しい説明 Flexboxlayout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

レイアウトの従来のソリューションはボックスモデルに基づいており、表示属性 + 位置属性 + フロート属性に依存しています。たとえば、垂直方向のセンタリングを実現するのが難しいなど、特殊なレイアウトでは非常に不便です。

2009 年、W3C は新しいソリューションである Flex レイアウトを提案しました。これは、さまざまなページレイアウトを簡単、完全、レスポンシブに実現できるものです。現在、この機能はすべてのブラウザでサポートされているため、この機能を安全に使用できるようになりました。

以下の内容は主に次の内容を指します: Flex Layout チュートリアル: 文法

1. Flex Layout とは何ですか?

Flex は Flexible Box の略で、「柔軟なレイアウト」を意味し、箱型のモデルに最大限の柔軟性を提供するために使用されます。
任意のコンテナを Flex レイアウトとして指定できます。

.box{  display: flex;}

ログイン後にコピー

インライン要素でも Flex レイアウトを使用できます。

.box{  display: inline-flex;}

ログイン後にコピー

Webkit コアを備えたブラウザでは、-webkit プレフィックスを追加する必要があります。

を Flex レイアウトに設定すると、子要素の float、clear、vertical-align 属性が無効になることに注意してください。

1.1 基本概念

Flexレイアウトを使用する要素は、Flexコンテナ（フレックスコンテナ）、または略して「コンテナ」と呼ばれます。そのすべての子要素は自動的に、「アイテム」と呼ばれる Flex アイテム (フレックスアイテム) と呼ばれるコンテナメンバーになります。

コンテナにはデフォルトで 2 つの軸があります: 水平主軸(主軸)と垂直交差軸(交差軸)です。主軸の開始位置（境界線との交点）をメインスタート、終了位置をメインエンド、交差軸の開始位置をクロススタート、終了位置をクロスエンドといいます。
デフォルトでは、アイテムは主軸に沿って配置されます。 1 つのアイテムが占める主軸のスペースをメインサイズと呼び、1 つのアイテムが占める横軸のスペースをクロスサイズと呼びます。

2. Flex レイアウトの利点

Flexbox を使用すると、通常、そのサブ要素のレイアウトをより適切に操作できます。例:

要素コンテナーに十分なスペースがない場合、各要素の幅を計算する必要はありません。それらを同じ位置の行に設定できます

それらを列に簡単に配置できます

表示を変更できます。構造を変更せずに並べ替えます。

要素コンテナーがパーセンテージを設定し、ビューポートのサイズが変更された場合、コンテナー内の各子要素が自動的に割り当てられるため、要素の正確な幅が変更されたり、レイアウトが崩れたりすることを心配する必要はありません。コンテナの幅または高さの割合。

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

コンテナを開いた時の表示に加え、コンテナに設定される以下の6つの属性もあります【旧バージョン】。

flex-direction: 主軸の方向 (つまり、アイテムの配置方向)。【box-orient】

3.1 表示

Flex コンテナを定義し、それが受け取る値に基づいてインラインかブロックかを決定します。 Flex コンテナは、そのコンテンツに対して新しいフレックスフォーマットコンテキストを作成します。

そうです

フレックスコンテナを開きます: 要素をフレックスコンテナに変換します

3.2 flex-direction は、フレックスコンテナの主軸のフレックスフロー方向を指定します

これは、正方形の軸を作成するために使用されます、これにより、Flex で Flex プロジェクトが定義されます。コンテナが配置される方向です。 Flexbox は一方向のレイアウトの概念です。 Flex プロジェクトの主な配置方法は、水平配置か垂直列配置であると考えられます。

.box{  display: -webkit-flex; /* Safari，Chrome */  display: flex;}

ログイン後にコピー

row (デフォルト値): 書き込みメソッドが ltr の場合、Flex アイテムは左から右に配置されます。書き込みメソッドが rtl の場合、Flex アイテムは右から左に配置されます

row- reverse: 書き込みメソッドが ltr の場合、Flex アイテムは右から左に配置されます。書き込みメソッドが rtl の場合、Flex アイテムは左から右に配置されます

column: 方向が異なることを除き、row と似ています。上から下へ

column-reverse: row -reverse と同様ですが、方向が下から上である点が異なります

3.3 flex-wrap は、flex 項目が横軸に沿って配置されるかどうかを指定します

デフォルトでは, Flex項目は可能な限り1行で表示されます。 flex-wrap のプロパティ値を変更して、複数行の Flex 項目を表示できます。ここでは方向も重要な役割を果たし、新しい行を積み重ねる方向を決定します。

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

ログイン後にコピー

nowrap (デフォルト値): 単一行表示、書き込み方法が ltr の場合、Flex 項目は左から右に配置され、それ以外の場合は rtl、右から左に配置されます

wrap: 複数行表示、if書き込み方法が ltr の場合、Flex 項目は左から右に配置され、それ以外の場合は rtl、右から左に配置されます

wrap-reverse: 複数行表示、書き込み方法が ltr の場合、Flex 項目は右から左に配置され、それ以外の場合は Flex 項目が右から左に配置されますrtl、左から右に並べています

3.4 flex-flow(适用于flex容器元素)

这是flex-direction和flex-wrap两个属性的缩写。两个属性决定了伸缩容器的主轴与侧轴。默认值是row nowrap（中间用空格隔开）。

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

ログイン後にコピー

3.5 justify-content 主轴上对齐伸缩项目

用于在主轴上对齐伸缩项目。这一行为会在所有可伸缩长度及所有自动边距均被解释后进行。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

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

ログイン後にコピー

flex-start(默认值):伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐。

flex-end:伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。

center:伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。

space-between:伸缩项目会平均地分布在行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于flex-start。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。

space-around:伸缩项目会平均地分布在行里，两端保留一半的空间。如果剩余空间是负数，或该行只有一个伸缩项目，则该值等效于center。在其它情况下，伸缩项目在确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布。

3.6 align-items 指定伸缩项目沿着侧轴对齐方式

伸缩项目可以在伸缩容器的当前行的侧轴上进行对齐，这类似于justify-content属性，但是是另一个方向。align-items可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。

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

ログイン後にコピー

flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。

center:伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。

baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。

stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。

3.7 align-content 多根轴线的对齐方式

当伸缩容器的侧轴还有多余空间时，align-content属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似。

请注意本属性在只有一行的伸缩容器上没有效果。

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

ログイン後にコピー

flex-start:各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边，之后的每一行都紧靠住前面一行。

flex-end:各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边，之前的每一行都紧靠住后面一行。

center:各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。（如果剩下的空间是负数，则行的堆叠会向两个方向溢出的相等距离。）

space-between:各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于flex-start。在其它情况下，第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。

space-around:各行在伸缩容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于center。在其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。

stretch:各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于flex-start。在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。

注意：只有多行的伸缩容器才会在侧轴上有多余的空间以供对齐，因为仅包含一行的伸缩容器中，唯一的一行会自动伸展填充全部的空间。

四、Flex项目属性

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order 项目流排列顺序

默认情况，Flex项目是按文档源的流顺序排列。然而，在Flex容器中可以通过order属性来控制Flex项目的顺序源。

.item {  order: <integer>;}

ログイン後にコピー

根据order重新排序伸缩项目。有最小（负值最大）order的伸缩项目排在第一个。若有多个项目有相同的order值，这些项目照文件顺序排。这个步骤影响了伸缩项目生盒树成的盒子的顺序，也影响了后面的演算法如何处理各项目。

4.2 flex-grow Flex项目的扩大比例

如果有必要的话，flex-grow可以定义一个Flex项目的扩大比例。它接受一个没有单位的值作为一个比例。它可以使用Flex项目完全占用Flex容器可用的空间。

如果所有Flex项目的flex-grow设置为1时，表示Flex容器中的Flex项目具有相等的尺寸。如果你给其中一个Flex项目设置flex-grow的值为2，那么这个Flex项目的尺寸将是其他Flex项目两倍（其他Flex项目的flex-grow值为1）。

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

ログイン後にコピー

注意：flex-grow取负值将失效。

4.3 flex-shrink Flex项目的缩小比例。

如果有必要，flex-shrink可以定义Flex项目的缩小比例。

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

ログイン後にコピー

注意：flex-shrink取负值将失效。

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

4.4 flex-basis 项目占据的主轴空间

flex-basis属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。main-size值使它具有匹配的宽度或高度，不过都需要取决于flex-direction的值。

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

ログイン後にコピー

如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。如下图所示：

4.5 flex

flex是flex-grow，flex-shrink和flex-basis三个属性的缩写。第二个和第三个参数(flex-shrink和flex-basis)是可选值。其默认值是0 1 auto。

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

ログイン後にコピー

建议您使用此简写属性，而不是设置单独属性。注意，如果flex取值为none时，其相当于取值为0 0 auto。

请注意flex-grow与flex-basis的初始值与他们在flex缩写被省略时的默认值不同。这里的设计是为了让flex缩写在最常见的情景下比较好用。

flex常见值

flex: 0 auto,flex: initial与flex: 0 1 auto相同。（这也就是初始值。）根据width／height属性决定元素的尺寸。（如果项目的主轴长度属性的计算值为auto，则会根据其内容来决定元素尺寸。）当剩余空间为正值时，伸缩项目无法伸缩，但当空间不足时，伸缩项目可收缩至其最小值。网页作者可以用对齐相关的属性以及margin属性的auto值控制伸缩项目沿着主轴的对齐方式。
flex: auto与flex: 1 1 auto相同。根据width／height属性决定元素的尺寸，但是完全可以伸缩，会吸收主轴上剩下的空间。如果所有项目均为flex: auto、flex: initial或flex: none，则在项目尺寸决定后，剩余的正空间会被平分给是flex: auto的项目。
flex: none与flex: 0 0 auto相同。根据width／height属性决定元素的尺寸，但是完全不可伸缩。其效果与initial类似，但即使在空间不够而溢出的情况下，伸缩项目也不能收缩。
flex: 与flex: 1 0px相同。该值使元素可伸缩，并将伸缩基准值设置为零，导致该项目会根据设置的比率占用伸缩容器的剩余空间。如果一个伸缩容器里的所有项目都使用此模式，则它们的尺寸会正比于指定的伸缩比率。

3.6 align-self

align-self则用来在单独的伸缩项目上覆写默认的对齐方式。（对于匿名伸缩项目，align-self的值永远与其关联的伸缩容器的align-items的值相同。）

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

ログイン後にコピー

若伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果。

如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果该元素没有父元素，则计算值为stretch。对齐属性值的定义如下：

flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。

center:伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。

stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。

注意：如果伸缩伸缩的高度有限制，此可能导致伸缩项目的内容溢出该项目。

flex 的行为是让盒子尽可能地填满一行，所以使用 flex 我们就有了让元素充满行的保障。但设置了 flex 的元素对 width 就不太买账了，于是要使用比它更严肃的 max-width 和 min-width 来设置。下面是效果：

在宽度足够时一行会显示更多元素，并且在确保元素尺寸在限制范围内的情况下尽可能地填满一行。下面是代码：

<style> ul { border:1px solid red; padding:0px; display:flex; list-style:none; flex-flow:row wrap; } ul li { flex:1; min-width:50px; max-width:80px; height:50px; background:#CCC; margin:4px; }</style><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

ログイン後にコピー