CSS レイアウト

レイアウト

要素を横に並べる

1. display: inline、display: inlinne-block
2. float
3. display: flex 「flex-box」利用

flex-box

親要素に指定

「display: flex;」した親要素で囲む
※インライン要素：display: inline-flex;

方向「flex-direction」

横並び

row：→
row-reverse：←

縦並び

column：↓
column-reverse：↑

配置「justify-content」

• center：中央に寄せ
• space-around：等間隔
• space-between：最初と最後は端、他は等間隔

行「flex-wrap」

• wrap：余分が次行に回る
• nowrap：親要素の幅に収まるように縮小

配置方法「align-items」

• center：高さに対して中央に表示
• stretch：高さいっぱい

float 横並び

• left：左寄せ
• right：右寄せ

clearfix：float解除

floatは親要素の高さをなくす為、解除「clear: both」が必要
html

<div class="clearfix">
    <p class="float">BOX1</p>
    <p class="float">BOX2</p>
    <p class="float">BOX3</p>
</div>

スタイルシート

.float {
    float: left;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}