Flexレイアウトおよびいくつかの一般的なレイアウトの実装

1.flexレイアウト
2009年、W 3 Cは新しい方案---Filexレイアウトを提出し、簡便、完全、応答式に各種ページレイアウトを実現することができる.現在、
すべてのブラウザでサポートされています.これは、この機能を安全に使用できることを意味します.
flex(柔軟で弾力性のある):非常に強力なレイアウトです.従来のレイアウトを使用している場合は、知識ベースを更新する必要があります.

float  
position
   
display:inline-block

2.テーマに直行
flexレイアウトの特徴

flexレイアウト方向がない

flexレイアウト空間自由割り当て、自動整列

flexレイアウトは単純な線形レイアウト

にのみ使用する.
3.flexの12大属性値
親要素の6大属性display:flex

(主軸方向)flex-derection:row/column/row-reverse/column-reverse

(改行)flex-wrap:wrap/nowrap/wrap-reverse(それぞれ1行目が上、改行せず、1行目が下)

.

flex-flowの上の2つの総合

(主軸の整列方向)justify-content:center/flex-start/flex-end/space-around/space-between

(側軸の整列方向)align-items:center/flex-end/flex-start/stretch/baseline

(複数行列の整列方向、少ない)align-content

4.サブエレメントの6大属性(flex-item)

flex-grow(プロジェクトの拡大率を定義し、デフォルトは0、すべてのプロジェクトが1の場合は等分空間)

flex-shrink(縮小スケールを定義し、いずれも1の場合、空間が不足している場合は、いずれも等スケール縮小)

.

flex-basis(主軸に余分なスペースがあるかどうかを計算し、デフォルトはauto、すなわちプロジェクト本来のサイズ)

flex(上の3つの統合)

order(数値が小さいほど上位に並べられ、デフォルトは0)

align-self(親要素のalign-itemプロパティを上書きする単一プロジェクトの独自の位置合わせを定義)

flexベースのレイアウトアプリケーション
左固定、主な内容の適応

.container{
  display: flex;
}
.container aslide{
  width: 100px;
  height: 80px;
  background: #f00;
  flex-basis: 100px;
}
.container main{
  flex-grow: 1;
  background: #0f0;
  margin-left: 10px;
}

リンク

三段組み

.layout{
  display: flex;
}
.layout_left{
  width: 100px;
  height: 80px;
  background: #000;
}
.layout_main{
  flex-grow:1;
  background: #00f;
}
.layout_right{
  width: 100px;
  height: 80px;
  background: #0f0;
}

リンク

携帯電話のレイアウト

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.container{
  display: flex;
  height: 100vh;
  flex-direction: column;
}
header .header{
   height: 100px;
}
header,footer{
  height: 70px;
  background: #000;
  color:#fff;
}
main{
  flex-grow:1;
  overflow:auto;
}

リンク
ふへんきょりかいほう

*{margin:0;padding:0}
li{list-style:none}
ul{
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  border:1px solid black;
  margin:auto;
  justify-content: space-between;
}
ul>li{
  width: 250px;
  height: 100px;
  background: #0f0;
  margin: 10px 0;
}

リンク
絶対垂直水平中央

.parent{
  display: flex;
  height: 500px;
  background: #ddd;
  align-items: center;
  justify-content:center;
}
.child{
  border:1px solid red;
}

リンク