ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【CSS3】flexboxの記述方法

flex-boxの使い方

このhtmlにflexを使っていく

<div class="box">
<p class="item1">item</p>
<div class="item2">
<p>item2</p>
<p>item2</p>
</div>

親要素のdisplayにflexを追加する。

子要素が自動的にflexアイテムになる。

.box{
    display:flex;
}
/*block要素*/
display:flex;
/*inline要素*/
display:inline-flex;

flex-direction

row,row-reverse

アイテムが左から右へ表示される。

.box{
    display:flex;
    flex-direction:row;
}

row-reverse

アイテムが右から左へ表示される。

.box{
    display:flex;
    flex-direction:row;
}

colmun,colmun-reverse

アイテムを上から下へ表示。

.box{
    display:flex;
    flex-direction:column;
    background:#F49EFF;
}

アイテムを下から上へ表示。

.box{
    display:flex;
    flex-direction:column-reverse;
}

flex-wrap

wrap,nowrap

アイテムを1行内に納める

.box{
    display:flex;
    flex-wrap:nowrap;
}

アイテムを複数行に並べる

.box{
    display:flex;
    flex-wrap:wrap;
}

wrap-reverse

改行した行を逆順に並べる

.box{
    display:flex;
    flex-wrap:wrap;
}

flex-flow

flex-directionとflex-wrapのショートハンド

.box{
    display:flex;
    flex-flow: row-reverse wrap;
}

justify-content

親要素の主軸に沿って整列させる

flex-start,flex-end

アイテムを左から表示

.box{
    display:flex;
    justify-content:flex-start;
}

アイテムを右から表示

.box{
    display:flex;
    justify-content:flex-end;
}

center

アイテムを中央に表示

.box{
    display:flex;
    justify-content:center;
}

space-between

アイテムを均等間隔をあけて端から端まで整列

.box{
    display:flex;
    justify-content:space-between;
}

space-around

アイテムを端から等間隔に整列

.box{
    display:flex;
    justify-content:space-around;
}

align-items

垂直方向の整列

stretch

高さいっぱいに整列

.box{
    display:flex;
    align-items:stretch;
}

flex-start

最上部に揃う

.box{
    display:flex;
    align-items:flex-start;
}

flex-end

最下部に揃う

.box{
    display:flex;
    align-items:flex-end;
}

center

真ん中に揃う

.box{
    display:flex;
    align-items:center;
}

baseline

ベースラインに沿って揃う

.box{
    display:flex;
    align-items:baseline;
}

align-content

stretch

高さいっぱいに整列させてアイテムの下に均等に間隔をあける

.box{
    display:flex;
    flex-wrap:wrap;
    align-content:stretch;
}

flex-start,flex-end

上を詰めて整列

.box{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
}

下を詰めて整列
(x軸の終点に向かって整列)

.box{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-end;
}

center

中央に整列

.box{
    display:flex;
    flex-wrap:wrap;
    align-content:center;
}

space-between

上端から下端まで均等に整列させる

.box{
    display:flex;
    flex-wrap:wrap;
    align-content:space-between;
}

space-around

上下等間隔に間を空けて整列させる

.box{
    display:flex;
    flex-wrap:wrap;
    align-content:space-around;
}

order

アイテムに指定することで順番を変えられる。
orderを指定していないアイテムの後ろに並ぶ。

.item1{
    background:#C9FFAD;
    order:2;
}
.item2{
    background:#ADB3FF;
    order:1;
}
.item3{
    background:#ADDFFF;
    order:3;
}
.item4{
    background:#ADFFE6;
}
.item5{
    background:#ADFFC6;
}

flex-grow

flex-growを同じ数値にすると同じサイズになる
他のアイテムと比較してどのくらいの大きさにするか決められる
(行が変わると、その行内のみで適用される)

.item1{
    background:#C9FFAD;
    flex-grow:2;
}
.item2{
    background:#ADB3FF;
    flex-grow:1;
}
.item3{
    background:#ADDFFF;
    flex-grow:1;
}

flex-shrink

どれくらい縮むかの比率

.item1{
    background:#C9FFAD;
    flex-shrink:2;
}
.item2{
    background:#ADB3FF;
    flex-shrink:1;
}
.item3{
    background:#ADDFFF;
    flex-shrink:0;
    /*0はオリジナルの値を維持*/
}

※以下未検証※

flex-basis

幅、高さを最初の大きさと同じにする
数値を指定するとその起きさになる

.item1{
    background:#C9FFAD;
    flex-basis:auto;
}
.item2{
    background:#ADB3FF;
    flex-basis:50px;
}
.item3{
    background:#ADDFFF;
    flex-basis:auto;
}

flex

flex-grow,flex-shrink,flex-basisのショートハンド

align-self

align-itemsの指定よりflexアイテムの記述を優先させる

|

引用:http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html