Flexbox

20074 ワード
CSS テキストリンク
Flexboxを使用すると、レイアウト構造をより容易に設計できます.

Usage


Flexboxモデルを使用するには、まずflex containerを定義する必要があります.
<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.flex-container {
  display: flex;
}

コンテナのプロパティ


flex-direction


flex itemを構築する方向を定義します.
  • column
  • column-reverse
  • row
  • row-reverse

    • flex-wrap


    flex itemの改行を設定します.
  • nowrap(デフォルト)
  • wrap
    行を成す
  • wrap-reverse

    • flex-flow

    flex-directionおよびflex-wrapのショートカット属性
    .container {
  display: flex;
  flex-flow: row wrap;
}

    justify-content


    Flexアイテムのソート(水平)
  • center
  • flex-start(デフォルト)
    flex containerの先頭に並ぶ
  • flex-end
    flex containerの末尾に並ぶ
  • space-around
    等辺距離配列
  • space-between
    第1項と最後項は容器の各一端に位置し、残りの項は平均
    • 配列されている.

    align-items


    Flexアイテムのソート(垂直)
  • center
  • flex-start
  • flex-end
  • stretch(デフォルト)
    プロジェクトの長さを増やしてflexコンテナを埋めます.
  • baseline
    flex itemを文字ベースラインに並べ替えます.

    • align-content


    flex lineソート
  • space-between
  • space-around
  • stretch(デフォルト)
  • center
  • flex-start
  • flex-end
    • itemsの行にはalign-itemsプロパティが使用されます.

    itemsプロパティ


    order


    flex itemの順序を指定します.
    <div class="flex-container">
  <div style="order: 2">1</div>
  <div style="order: 1">2</div>
  <div style="order: 3">3</div>
</div>

    flex-grow


    残りのflex itemよりどれだけ大きくなるかを指定します.
    <div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>  <!-- 8배 -->
</div>

    flex-shrink


    残りのflex itemと比較してどのくらい縮小するかを指定します.既定値は1です.
    <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>  <!-- 축소되지 않음 -->
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

    flex-basis


    flex itemの初期長さを指定します.
    <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

    flex

    flex-grow、flex-shrink、flex-basisのショートカット属性
    <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>  <!-- 확대/축소 불가능, 초기 길이 200px -->
  <div>4</div>
</div>

    align-self


    選択項目の整列(垂直)
    <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>
    iPhoneやiPadでiTunesとWi-Fi同期が出来ない場合
    [Git] remote repository