検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 flex レイアウトの概要

CSS3 flex レイアウトの概要

angryTom
angryTom転載
2020-02-21 17:49:021989ブラウズ

CSS3 flex レイアウトの概要

CSS3 フレックス レイアウトの概要

2009 年、W3C は、シンプルで完全なフレックス レイアウトという新しいソリューションを提案しました。さまざまなページ レイアウトをレスポンシブに実装します。現在、すべてのブラウザでサポートされています。

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

(推奨学習: CSS チュートリアル)

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

.box{
  display: flex;
}
.box{
  display: inline-flex;
}

Webkit コアを備えたブラウザでは、-webkit プレフィックスを追加する必要があることに注意してください。 

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

また、Flexレイアウトに設定後は、子要素のfloat、clear、vertical-align属性が無効になります。

フレックス レイアウトで一般的に使用される 6 つのプロパティ

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

##1、flex-direction属性主軸の方向（つまり、アイテムの配置方向）を決定します。 

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

    row (デフォルト値): 主軸は水平であり、開始点は左端にあります。
  • row-reverse: 主軸は水平であり、開始点は右端にあります。
  • 列: 主軸は垂直であり、開始点は上端にあります。
  • column-reverse: 主軸は垂直であり、開始点は下端にあります。

2. flex-wrap<strong></strong>プロパティ定義、軸線が1本配置できない場合にどのように折り返すか。 

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

  • nowrap (デフォルト): 行の折り返しはありません。
  • wrap: 最初の行を先頭にしてラップします。
  • wrap-reverse: ラップ、最初の行は以下です。

3. flex-flow<strong></strong> 属性は、flex-direction 属性および flex-wrap## です。 # 属性。短い形式、デフォルト値は row nowrap です。 <pre class="brush:php;toolbar:false;">.box { flex-flow: &lt;flex-direction&gt; || &lt;flex-wrap&gt;; }</pre>

4、

justify-content<strong> 属性は、主軸上の項目の配置を定義します。 </strong><pre class="brush:php;toolbar:false;">-content: flex-start | flex-end | center | space-between | space-</pre>

flex-start (デフォルト): 左揃え
  • flex-end: 右揃え
  • center: 中央揃え
  • space- between : 項目間の間隔が等しくなるように両端を揃えます。
  • space-around: 各アイテムは両側に等間隔に配置されます。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。
5、

align-items<strong> プロパティは、項目を交差軸上でどのように配置するかを定義します。 </strong><pre class="brush:php;toolbar:false;">.box { align-items: flex-start | flex-end | center | baseline | stretch; }</pre>

    flex-start
  • : 交差軸の開始点を揃えます。
    • flex-end
  • : 交差軸の終点の位置合わせ。
    • center
  • : 交差軸の中点を揃えます。
    • baseline
  • : アイテムのテキストの最初の行のベースライン配置。
    • stretch
  • (デフォルト値): アイテムの高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナーの高さ全体を占めます。
6、

align-content<strong> 属性は、複数の軸の位置合わせを定義します。プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。 </strong><pre class="brush:php;toolbar:false;">.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }</pre>この属性は 6 つの値を取ることができます。

    flex-start
  • : 交差軸の開始点に位置合わせします。
    • flex-end
  • : 交差軸の終点に位置合わせします。
    • center
  • : 交差軸の中点に位置合わせされます。
    • space-between
  • : 交差軸の両端に合わせて、軸間の間隔が均等になるように配置します。
    • space-around
  • : 各軸は両側に等間隔に配置されます。したがって、軸間の距離は、軸とフレーム間の距離の 2 倍になります。
    • stretch
  • (デフォルト値): 軸は交差軸全体を占めます。
    • また、プロジェクトには次の 6 つのプロパティが設定されています。

#注文
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  • order 属性項目を並べ替える順序を定義します。値が小さいほど順位が高くなります。デフォルトは 0 です。 
.item {
  order: <integer>;
}


flex-grow

この属性は項目の拡大率を定義します。デフォルトは

0 です。つまり、スペースが残っている場合は、拡大されません。 

.item {
  flex-grow: <number>; /* default 0 */}
すべての項目の flex-grow

プロパティが 1 の場合、残りのスペース (存在する場合) を均等に分割します。 1 つの項目の

flex-grow プロパティが 2 で、他のすべての項目が 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。 flex-shrink

この属性はアイテムの収縮率を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、アイテムは縮小します。 

.item {
  flex-shrink: <number>; /* default 1 */}
すべての項目の flex-shrink

プロパティが 1 の場合、スペースが不足すると、すべての項目が比例して縮小されます。 1 つの項目の

flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不十分な場合、前者は縮小されません。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

以上がCSS3 flex レイアウトの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSSで文字の両端を揃える方法次の記事：CSSで文字の両端を揃える方法

関連記事

続きを見る