CSS
柔軟なボックスレイアウト（Flexbox）

前書き

構文

• ディスプレイ：フレックス;
• フレックス方向：行|行 - 逆|列|列逆転;
• フレックスラップ：nowrap |ラップ|折り返し;
• フレックスフロー：<'フレックス方向'> || <'flex-wrap'>
• justify-content：フレックススタート|フレックスエンド|センター| |スペース・アラウンド;
• align-items：フレックススタート|フレックスエンド|センター| |ストレッチ;
• align-content：フレックススタート|フレックスエンド|センター| |スペース - 周辺|ストレッチ;
• 順序：<整数>。
• flex-grow：<数字>; / *デフォルト値0 * /
• フレックスシュリンク：<number>; / *デフォルト1 * /
• フレックスベース：<length> |自動; / *デフォルトのauto * /
• フレックス：なし| [<'flex-grow'> <'flex-shrink'>？ || <'flex-basis'>]
• align-self：auto |フレックススタート|フレックスエンド|センター| |ストレッチ;

備考

スティッキー可変長フッター

このコードは、固定フッターを作成します。コンテンツがビューポートの最後に達していない場合、フッターはビューポートの下部に貼り付けられます。コンテンツがビューポートの下を通過すると、フッターもビューポートから押し出されます。 結果を見る

HTML：

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">
  <h4>Footer</h4>
</div>

CSS：

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  /* Include `0 auto` for best browser compatibility. */
  flex: 1 0 auto;
}

.header, .footer {
  background-color: grey;
  color: white;
  flex: none;
}

Flexboxを使った聖杯レイアウト

聖杯レイアウトは、固定高さのヘッダーとフッター、および3列のセンターを持つレイアウトです。 3つの列には、固定幅のsidenav、流体の中心点、広告などの他のコンテンツの列が含まれます（流体の中心がマークアップの最初に表示されます）。非常に簡単なマークアップでこれを達成するためにCSS Flexboxを使うことができます：

HTMLマークアップ：

<div class="container">
  <header class="header">Header</header>
  <div class="content-body">
    <main class="content">Content</main>
    <nav class="sidenav">Nav</nav>
    <aside class="ads">Ads</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

CSS：

body {
  margin: 0;
  padding: 0;
}

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

.header {
  flex: 0 0 50px;
}

.content-body {
  flex: 1 1 auto;
  
  display: flex;
  flex-direction: row;
}

.content-body .content {
  flex: 1 1 auto;
  overflow: auto;
}

.content-body .sidenav {
  order: -1;
  flex: 0 0 100px;
  overflow: auto;
}

.content-body .ads {
  flex: 0 0 100px;
  overflow: auto;
}

.footer {
  flex: 0 0 50px;
}

デモ

Flexboxを使ってカード内のボタンを完全に位置合わせ

これは、このようなカードの中のアクションの呼び出しを垂直方向に整列させるために、最近のデザインでは規則的なパターンです：

これは、 flexbox特別なトリックを使用して達成することができます

HTML

<div class="cards">
  <div class="card">
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p><button>Action</button></p>
  </div>
  <div class="card">
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p><button>Action</button></p>
  </div>
</div>

まず第一に、CSSを使ってdisplay: flex;を適用しdisplay: flex;容器に移す。これにより、内部に自然に流れるコンテンツと同じ高さの2つの列が作成されます

CSS

.cards {
    display: flex;
}
.card {
    border: 1px solid #ccc;
    margin: 10px 10px;
    padding: 0 20px;
}
button {
    height: 40px;
    background: #fff;
    padding: 0 40px;
    border: 1px solid #000;
}
p:last-child {
    text-align: center;
}

レイアウトが変わり、次のようになります：

ボタンをブロックの下部に移動するには、 display: flex;を適用する必要がありますdisplay: flex;方向を「 column設定してカード自体に貼り付けcolumn 。その後、カード内の最後の要素を選択し、 margin-topをauto設定する必要があります。最後の段落をカードの一番下まで押して、必要な結果を得ます。

最終的なCSS：

.cards {
    display: flex;
}
.card {
    border: 1px solid #ccc;
    margin: 10px 10px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}
button {
    height: 40px;
    background: #fff;
    padding: 0 40px;
    border: 1px solid #000;
}
p:last-child {
    text-align: center;
    margin-top: auto;
}

動的な垂直と水平のセンタリング（align-items、justify-content）

簡単な例（単一要素を中心にする）

HTML

<div class="aligner">
  <div class="aligner-item">…</div>
</div>

CSS

.aligner {
  display: flex; 
  align-items: center;
  justify-content: center;
}

.aligner-item {
  max-width: 50%; /*for demo. Use actual width instead.*/
}

ここにデモがあります。

推理

個々のプロパティの例

以下のスタイルはすべてこの単純なレイアウトに適用されます：

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

#containerはflex-boxです。

例： justify-content: center水平フレックスボックスのjustify-content: center

CSS：

div#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

結果：

ここにデモがあります。

例： justify-content: center垂直フレックスボックスのjustify-content: center

CSS：

div#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

結果：

ここにデモがあります。

例： align-content: center水平フレックスボックスのalign-content: center

CSS：

div#container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

結果：

ここにデモがあります。

例： align-content: center垂直フレックスボックスのalign-content: center

CSS：

div#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

結果：

ここにデモがあります。

例：水平フレックスボックスの両方をセンタリングするための組み合わせ

div#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

結果：

ここにデモがあります。

例：垂直フレックスボックスの両方をセンタリングするための組み合わせ

div#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

結果：

ここにデモがあります。

ネストされたコンテナの高さ

このコードは、すべてのネストされたコンテナが常に同じ高さになるようにします。これは、すべてのネストされた要素が含まれているparrent divと同じ高さであることを保証することによって行われます。 実際の作業例を参照してください ： https : //jsfiddle.net/3wwh7ewp/

この効果は、プロパティのalign-itemsがデフォルトでstretchするように設定されているために実現されます。

HTML

<div class="container">
  <div style="background-color: red">
    Some <br />
    data <br />
    to make<br />
    a height <br />
 </div>
  <div style="background-color: blue">
    Fewer <br />
    lines <br />
 </div>
</div>

CSS

.container {
    display: flex;
    align-items: stretch; // Default value
}

注： 10未満のIEバージョンでは動作しません

要素をコンテナに最適にフィット

flexboxの優れた機能の1つは、コンテナを親要素に最適に適合させることです。

ライブデモ

HTML：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

CSS：

.flex-container {
    background-color: #000;
    height: 100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

.flex-item {
    background-color: #ccf;
    margin: 0.1em;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 200px; /* or % could be used to ensure a specific layout */
}

結果：

画面がリサイズされると、列が適応します。