CSSレイアウトのフレックス研究ノート

EDITORIAL

Flexは、ボックスモデルに最大限の柔軟性を提供するために、「弾性レイアウト」を意味、柔軟なボックスの頭字語です。

すべてのコンテナは、Flexレイアウトとして指定することができます。

Flexコンテナ（フレックスコンテナ）と呼ばれるフレックスレイアウト要素を使用して、と呼ばれる「コンテナ」。これは、すべての子要素が自動的にFlexプロジェクト（フレックス項目）と呼ばれるコンテナのメンバーになるのです。

フレックスコンテナ

水平スピンドル（主軸）、縦軸が（クロス軸）と交差：デフォルトコンテナは二つの軸が存在します。スピンドル（境界との交点）の開始位置が呼び出されmain start、終了位置が呼び出されmain end、呼び出される交差軸は、開始位置cross start、終了位置が呼び出されますcross end。

次の下の容器に共通の属性と要素を持っているかを学習

コンテナのプロパティ

フレックス方向

方向に配置された容器内の要素

あなたが行または列の方向を反転するとき、フレックスエンドフレックス開始し、また方向に対応するになっていることに注意してください
フレックス方向として、正当化コンテンツ縦配向制御、ALIGN-項目が横方向コントロールを整列した時点でメモ

row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上

フレックスラップ

要素は、コンテナ表示をラップしてみましょう

nowrap: 所有的元素都在一行。
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行

正当化するコンテンツ（共通）

主（水平）配向

flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between: 多余的空白间距只在元素中间区域分配 
space-around: around是环绕的意思，元素周围保持相等的距离，空白间距在元素的周围
space-evenly: evenly是匀称、平等的意思，每个flex子项两侧空白间距完全相等

ALIGN-項目（共通）

交差軸（垂直）配向

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器

ALIGN-コンテンツ

行と列の意思決定の間の間隔

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。

要素の属性

注文

順序属性は、注文項目を定義します。値が小さいほど、より前方に配置は、デフォルトは0です

フレックス成長（共通）

拡大フレックス成長拡大していない空き領域がある場合は、項目属性の定義を、デフォルトでは、すなわち、0です。
すべての項目のフレックス成長の属性が1の場合は（もしあれば）、彼らは残りのスペースをアリコートします。
プロジェクトが2であれば、他のプロジェクトが1あるプロパティをフレックス成長し、残りのスペースが2倍以上に他の項目よりも、元によって占有されています

フレックスシュリンク

フレックス収縮属性は、プロジェクトの縮尺を定義し、デフォルトでは容量が不足している場合つまり、プロジェクトが削減されます、1です。
場合はスペースの不足が、縮小されます場合は、すべてのアイテムが1ある属性フレックス縮小。
プロジェクトがゼロの場合の特性をフレックスシュリンク、他のプロジェクトは、スペースの不足、前者は収縮しない場合は、1です。

プロパティの無効な負の値。

フレックス基礎

フレックス基本属性は、プロジェクト（メインサイズ）によって占有され、余分なスペースを割り当てる前に、スピンドルスペースを定義します。余分なスペースがあれば、ブラウザは、このプロパティに基づいて、スピンドルを計算します。デフォルトでは、プロジェクトの大きさであったであろう自動車、です

フレックス

Flexプロパティは、成長フレックスフレックス縮小し、フレックスベーシス速記、デフォルト値です0 1 auto。2つのオプションの属性の後に

合わせ自己

他の要素と単一の要素を備えることができる同じアラインメントではありません

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器

練習

平均は、レイアウトを実現しました

提供することにより、itemスリーブ要素の層をitem-wrap、次にitem-wrap左右セット負のmargin-left,margin-right平均レイアウトを実現しました

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="item-wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
</body>
</html>

.container{
  width: 800px;
  margin: 0 auto;
  border: 1px solid red;
}
.item-wrap{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.item{
  width: calc(25% - 8px);
  height: 194px;
  background: #ddd;
  margin: 4px;
}

平均レイアウト

オンラインプレビュー

聖杯のレイアウトを実現

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="header">header</div>
  <div class="main">
    <div class="nav">nav</div>
    <div class="content">content</div>
    <div class="aside">aside</div>
  </div>
  <div class="footer">footer</div>
</div>
</body>
</html>

.container{
  display: flex;
  flex-direction: column;
}
.container > .header{
  height: 50px;
  background: #eee;

}
.container > .main{
  display: flex;
  height: calc(100vh - 100px);
}
.container > .main >.nav,
.container > .main >.aside
{
  width: 230px;
  background-color: #ddd;
}
.container > .main >.content{
  flex: 1;
  background: #fff;
}
.container> .footer{
  height: 50px;
  background: #eee;
}

聖杯のレイアウト