CSSのflex・floatを使ったWebサイトのレイアウト例

flexのみ

flexやflex-directionなどは親要素に記載する。最初間違ってしまうのは、小要素に記載してしまったんだけれども…。

今までと同じように親要素、レイアウトしたい小要素で構成する。

<div class="sample">
<ul>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
</ul>
</div>

CSSが違う。

.sample ul{
display:flex;
}

これだけ。ベンダープレフィックスを併記しているところがあるけれども、対象のブラウザにしないのであれば無駄なので書かない。

flex縦並び

縦並び、わざわざこんなことしなくても、ブロック要素なら縦になるが。

.sample ul{
display:flex;
flex-direction:column;
}