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 です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.box { flex-flow: &lt;flex-direction&gt; || &lt;flex-wrap&gt;; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

justify-content<strong> 属性は、主軸上の項目の配置を定義します。 </strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">-content: flex-start | flex-end | center | space-between | space-</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

align-items<strong> プロパティは、項目を交差軸上でどのように配置するかを定義します。 </strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.box { align-items: flex-start | flex-end | center | baseline | stretch; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

align-content<strong> 属性は、複数の軸の位置合わせを定義します。プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。 </strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }</pre><div class="contentsignin">ログイン後にコピー</div></div>この属性は 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 プロパティが 2 で、他のすべての項目が 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。 flex-shrink

.item {
  flex-shrink: <number>; /* default 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 サイトの他の関連記事を参照してください。