柔軟なレイアウト (Flex レイアウト) の詳細な紹介

1. 柔軟なレイアウト

日常生活では、次のレイアウト タイプをよく使用します:

1. フローティング + 配置

2. アダプティブ (パーセンテージ)

3. レスポンシブ レイアウト

4.できるレイアウト (フレックス レイアウト)

今日整理したいのは、より一般的に使用されるフレキシブル レイアウトですが、ブロック タグとインライン ブロック タグには違いがあります。

{:;
}
input{
　　:;
}

もちろん、お金のようにすべてが万人に好かれるわけではなく、メリットもあればデメリットもあります。

利点: 互換性はすべてのブラウザーをサポートし (Webkit ベースのブラウザーは -webkit- を追加する必要があります)、ユーザーの好みに応じて調整でき、任意のコンテナーを Flex レイアウトとして指定できます。 -webkit-)，可以随用户的喜好进行调节，可以将任何一个容器指定为Flex布局。

　　缺点：因为弹性布局可调节，所以有巨大的可能性，需要花很多的时间进行调整；有些弹性设计要为IE6单独设计样式，不过……IE6还有多少人在用(⊙﹏⊙)b。

　　注意：当我们使用了弹性布局，那么在CSS里的float、clear和vertical-align就会失效。

二、  弹性布局的属性

　　首先是作为弹性布局的容器的属性。　　

　　1.flex-direction属性

 

　　flex-direction决定了容器的方向。

div {
  flex-direction: row | row-reverse | column | column-reverse;
}

　　四个值分别为：row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。

 

　　2.flex-wrap属性

 

　　默认情况下的布局一般在同一行，当设置了flex-wrap属性之后将自动将排列不下的内容进行换行。

div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

　　四个值分别为：nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。

 

　　3.flex-flow属性

 

　　flex-flow属性是以上两种属性的简写形式，默认值是row nowrap。

div {
  flex-flow: <flex-direction> || <flex-wrap>;
}

　　

　　4.justify-content属性

 

　　justify-content属性定义了在容器方向上的对齐方式。

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

　　flex-start(默认值)：向左对齐。

　　flex-end：向右对齐。

　　center： 居中对齐。

　　space-between：两端对齐，每一个子元素等距离间隔，子元素与容器边框无间隔。

　　space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。

 

　　5.align-items属性

 

　　align-items属性定义在垂直容器方向上的对齐方式。

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

　　flex-start：垂直方向的起点对齐。

　　flex-end：垂直方向的终点对齐。

　　center：垂直方向的中点对齐。

　　baseline: 与第一个子元素中文字的基线对齐。

　　stretch(

短所: 柔軟なレイアウトは調整可能であるため、大きな可能性があり、調整に多くの時間がかかります; 一部の柔軟なデザインでは IE6 用に別のスタイルが必要ですが...どれだけの人がまだ IE6 を使用しているでしょうか (⊙﹏⊙)b 。

注: フレキシブル レイアウトを使用する場合、CSS の float、clear、vertical-align は無効になります。

2. フレキシブルレイアウトのプロパティ

一つ目は、フレキシブルレイアウトとなるコンテナのプロパティです。

🎜1.flex-direction属性🎜🎜🎜🎜🎜🎜 flex-directionはコンテナの方向を決定します。 🎜🎜

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

🎜🎜 4つの値は、行（デフォルト値）左から右、行反転右から左、列反転上から下、列反転下から上です。 🎜🎜 🎜🎜 🎜🎜2.flex-wrap 属性 🎜🎜🎜🎜 🎜🎜 デフォルトではレイアウトは通常同一行になります flex-wrap 属性を設定すると、配置できないコンテンツは自動的に折り返されます。 🎜🎜

.son {
  order: <integer>;
}

🎜🎜 4つの値は、nowrap（デフォルト値）はラップしない、wrapは下方向にラップ、wrap-reverseは上方向にラップします。 🎜🎜 🎜🎜 🎜🎜3.flex-flow属性🎜🎜🎜🎜🎜🎜 flex-flow属性は上記2つの属性の略称であり、デフォルト値はrow nowrapです。 🎜🎜

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

🎜🎜 🎜🎜 🎜🎜4.justify-content属性🎜🎜🎜🎜 🎜🎜 justify-content属性は、コンテナの方向の配置を定義します。 🎜🎜

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

🎜🎜 flex-start(デフォルト値): 左揃え。 🎜🎜 flex-end: 右揃え。 🎜🎜 center： 中央揃え。 🎜🎜 Space-between: 両端を揃え、各サブ要素は等間隔で、サブ要素とコンテナの境界線の間に隙間はありません。 🎜🎜 space-around: 各子要素の両側のスペースは等しいです。子要素間の間隔は、子要素とコンテナの境界線の間の間隔の 2 倍です。 align-items 属性は、垂直コンテナ方向の配置を定義します。 🎜🎜

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

🎜🎜 flex-start: 開始点を垂直方向に揃えます。 🎜🎜 flex-end: 垂直方向のエンドポイントの位置合わせ。 🎜🎜 center: 垂直方向の中点を揃えます。 🎜🎜 ベースライン: 最初の子要素のテキストのベースラインと位置合わせされます。 🎜🎜 stretch (デフォルト値): 子要素が高さを設定しないか、高さが auto に設定されている場合、コンテナの高さ全体を占めます。 🎜🎜 🎜🎜 🎜🎜6.align-content 属性 🎜🎜🎜🎜 🎜🎜 align-content 属性は、子要素の 2 方向の配置を定義します。 🎜🎜りー🎜

　　flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

　　space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

　　space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：占满整个垂直方向。

 

　　下面就是具有弹性布局容器中子元素的属性

　　1.order属性

 

　　order属性定义了子元素的排列顺序，数值小的在前。

 

.son {
  order: <integer>;
}

 

　　

　　2.flex-grow属性

 

　　flex-grow属性定义了子元素的放大比例，默认值为0。

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

　　当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。

　　

　　3.flex-shrink属性

 

　　flex-shrink属性定义了子元素的缩小比例，默认值为1。

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

　　给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。

　　

　　4.flex-basis属性

 

　　该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

　　

　　5.flex属性

 

　　该属性为flex-grow, flex-shrink 和 flex-basis的简写。

 

　　6.align-self属性

 

　　该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。

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

Auto: デフォルト値。親の align-items 属性がデフォルトで継承されることを示します。

flex-start: 開始点を垂直方向に揃えます。 　　flex-start：垂直方向的起点对齐。

　　flex-end：垂直方向的终点对齐。

　　center：垂直方向的中点对齐。

　　baseline: 与第一个子元素中文字的基线对齐。

　　stretch(

flex-end: 垂直方向のエンドポイントの位置合わせ。

center: 垂直方向の中点を揃えます。

ベースライン: 最初の子要素のテキストのベースラインと位置合わせされます。

stretch (デフォルト値): 子要素が高さを設定しないか、高さが auto に設定されている場合、コンテナの高さ全体を占めます。 🎜🎜 🎜 flex レイアウト (伸縮自在なレイアウト) 🎜🎜🎜 1. コンテナのプロパティは次のとおりです: flex-dirction: (主軸の方向を決定します) (つまり、アイテムの配置の方向) 値: row/ row-reverse/column/column-reverse / flex-wrap: (1 つの軸を配置できない場合の折り返し方法) 値: nowrap (デフォルト): 行の折り返しなし。 Wrap: 最初の行を先頭にしてラップします。 Wrap-reverse: 以下の最初の行をラップします。 flex-flow: (flex-flow プロパティは、flex-direction プロパティと flex-wrap プロパティの省略形です。デフォルト値は row nowrap です) justify-content: (justify-content プロパティは、項目の配置を定義します)主軸。) 値の取得: flex-start (デフォルト): 左揃え flex-end: 右揃え center: 中央揃え space-between: 両端に揃え、項目間の間隔は等しくします。 space-around: 各アイテムは両側に等間隔に配置されます。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。 align-items (交差軸上で整列する方法) 値: flex-start/flex-end/center/baseline/stretch align-content (複数の軸の整列を定義します。項目に軸が 1 つしかない場合、この属性には何もありません効果 機能) 値: flex-start: 交差軸の開始点に位置合わせします。 flex-end: 交差軸の終点に位置合わせされます。 center: 交差軸の中点に位置合わせされます。 space-between: 交差軸の両端に合わせて、軸間の間隔が均等になります。 space-around: 各軸は両側に等間隔に配置されます。したがって、軸間の距離は、軸とフレーム間の距離の 2 倍になります。ストレッチ (デフォルト): 軸が交差軸全体を占めます。 。値が小さいほど、配置は前方に進みます。デフォルトは 0 です。flex-grow 属性は項目の拡大率を定義します。デフォルトは 0 です。つまり、スペースが残っている場合は拡大されません。 flex-shrink 属性は項目の縮小率を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、項目は縮小されます。フレックスベースのアイテムが占める主軸のスペース (メイン サイズ)。ブラウザはこの属性を使用して、主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。 flex align-self を使用すると、align-items プロパティをオーバーライドして、単一の項目を他の項目とは異なる方法で配置できます。デフォルト値は auto で、親要素がない場合は、親要素の align-items 属性を継承します。 🎜

以上が柔軟なレイアウト (Flex レイアウト) の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。