Flexの一般的なレイアウトの例

4118 ワード

もしflexに対してあまり熟知していない学友ならば、私の別の1篇の文章Flexの配置を見てみることができます
1、グリッドレイアウト
1.1、基本グリッドレイアウト
最も簡単なグリッドレイアウトは、平均分布です.HTMLコードは以下の通りです.

CSSコードは以下の通りです.

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
  background: #eee;
  margin: 10px;
}

ここで最も重要なのはflex:1各サブエレメントを等比伸縮させること
1.2、パーセントレイアウト
あるグリッドの幅は一定のパーセントであり、残りのグリッドは残りのスペースを平均的に割り当てます.HTMLコードは以下の通りです.


    50%
    auto
    auto


    auto
    50%
    1/3

CSSコードは以下の通りです.

.col2 {
  flex: 0 0 50%;
}
.col3 {
  flex: 0 0 33.3%;
}

ここで最も重要なのはflexの3番目の属性、すなわちflex-basisによって要素が占める空間を定義することである.
2、聖杯レイアウト
聖杯レイアウト(Holy Grail Layout:)は、最も一般的なウェブサイトレイアウトを指します.ページは上から下まで、頭(header)、体幹(body)、尾(footer)の3つの部分に分かれています.このうち体幹は水平に3つの欄に分けられ、左から右にナビゲーション、メイン欄、サブ欄があります.HTMLコードは以下の通りです.


    header
    
      content
      nav
      aside
    
    footer

CSSコードは以下の通りです.

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body {
  display: flex;
  flex: 1;
}

header,
footer {
  flex: 0 0 100px;
}
.content {
  flex: 1;
}

.ads,
.nav {
  flex: 0 0 100px;
}

.nav {
  order: -1;
}

.bg {
  background: #eee;
  margin: 10px;
}

@media (max-width: 768px) {
  .body {
    flex-direction: column;
    flex: 1;
  }

  .nav,
  .ads,
  .content {
    flex: auto;
  }
}

この中で注意しなければならない点は

containerのflex-direction: columnこれで保証されたheader、body、footer垂直軸に並ぶ

header、footerの高さはflex: 0 0 100pxでコントロール可能

nav位置調整可能order:-1

@media (max-width: 768px)により小画面のページ構造を調整

3、サイド固定幅
サイド固定幅、右適応htmlコードは以下の通りです.


    aside
    
      header
      content
      footer

CSSコードは以下の通りです.

.bg {
  background: #eee;
  margin: 10px;
}
.container1 {
  min-height: 100vh;
  display: flex;
}
.aside1 {
  /* flex: 0 0 200px; */
  flex: 0 0 20%;
}
.body1 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content1 {
  flex: 1;
}
.header1, .footer1 {
  flex: 0 0 10%;
}

これは上の基本とあまり差がないので説明しません.
4、フローレイアウト
1行あたりの項目数が固定され、自動的に支店が開きます.htmlコードは以下の通りです.


css 
.container2 {
  width: 200px;
  height: 150px;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.item {
  box-sizing: border-box;
  background: #eee;
  flex: 0 0 20%;
  height: 40px;
  margin: 5px;
}
 
ここでは にflex-flow: row wrapサブエレメントを に べて 
まとめ
これは が にまとめたレイアウトです. いがあれば、 を します.その のシリーズ

POJ-2811:消灯問題(ボタンの問題、列挙)

Markdownpad 2コードハイライト