• このエントリーをはてなブックマークに追加

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はwidthがコンテンツ分の幅となるため、注意が必要。横にストレッチしたり、それ以上大きくならないようにするためには親の要素を100%にして、子要素がオーバーしそうなときには、折り返すようにflex-wrap:wrapとしなければうまくいかない。これも慣れ。

flex縦並び

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

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

縦に並べるという設定も可能。横並びはデフォルト。display:flex;とすると横並びとなる。折返しはしないので注意が必要。

float

floatというものはCSSの歴史の中でも長い。CSSとHTMLを分離して記述するというレイアウト方式が当たり前になるころに使われ始めたレイアウト方式。これについてはブラウザでバグがあったためになかなか使うには難しいものがあったが、それもブラウザのバグが解決されるようになってからはこの方式が当たり前に。

.sample ul li{
float:left;
}

floatというものは、浮かせるという意味がある。そのため、この要素が浮くということは、地面・海面に浮かび上がってしまうために、floatした要素の高さが0(通常の場所にいなくなって)しまう。

高さが0になるということは、その後の要素が浮かび上がっている要素に巻き込まれるような形で、レイアウト崩れが起きる。

それを防ぐためには、floatして左右に並べた後に、clear:both;とかして、floatを解除するということをしなければいけない。flexの発想でいるとなかなか理解しがたいものだが、これは、文章内の画像を浮かび上がらせて、段落をうまく回り込ませると言ったケースには使える。

しかし、それも今後は違ったプロパティが登場してくるので、clearが必要な面倒なfloatというものはほぼ使われなくなるのかも。

<div class="sample">
<ul class="clearfix">
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>
</div>

このとおり、clearfixというクラスを付与して、clearfixの要素には、

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

としておくと、<ul>の後ろにclaer:both;をつける。そうすることで、コンテンツの背景などをつけたい場合でも高さが0という解釈にならず、背景などをそのまま安心して表示できるし、その後の要素が巻き込まれない様になる。

display:flex;が現われ、普及しているブラウザでも問題なく解釈されるようになると、flexが多く使われるように。