Edited at

横並びCSSプロパティ(inline-block、table-cell、float、Flexbox)のまとめ

CSSの横並びテクニックを1から整理しました。

後半の力作「Flexboxのプロパティ一覧」、是非ご覧ください。


inline-block

<ul class="container">

<li class="item">1</li>
<li class="item">2</li>
<li class="item">3<br>3</li>
</ul>

.container {

text-align: center;
}
.item {
display: inline-block;
vertical-align: middle;
}

image.png


メリット

本来、インライン要素はwidthやheightを指定できないが、display: inline-blockをする事によって、文章中にインラインで要素を設置する事ができ、かつwidthやheightを指定する事ができる。


デメリット


  • 子要素の内容は基本上揃えになる。

  • 高さを指定している場合、vertical-alignが使用できない。


よく使うパーツ


  • パンくず

  • 文章中の指定した文字に装飾をしたい時


table-cell

親要素と子要素の関係がある


メリット


  • 親要素に横幅を指定して、margin: 0 auto;と指定すれば、左右中央に設置することが可能。

  • 子要素の縦幅を均一に揃えてくれて、子要素にvertical-align: middle;を指定すれば、上下中央に揃えることが可能。

  • ulにtable-layout:fixedを指定すれば、小要素の幅を均等にする事も可能。

<ul class="container">

<li class="item">1</li>
<li class="item">2</li>
<li class="item">3<br>3</li>
</ul>

.container {

display: table;
width: 70%;
margin: 0 auto;
table-layout: fixed;
}
.item {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.item:nth-child(1) {
width: 10%;
}.item:nth-child(2) {
width: 30%;
}.item:nth-child(3) {
width: 60%;
}

image.png


デメリット


  • .item間の余白をmarginで調整することが出来ない。

  • 孫要素(liの中のaタグなど)の高さが異なると縦幅がマチマチになってしまう。

  • 子要素が全て横並びになってしまうので、柔軟なレスポンシブ対応ができない。


    • PCは6列、spは3列x2行にしたい場合(NG)

    • PCは6列、spは1列6行にしたい場合(OK)

    • 1番目と2番目の子要素を横並びにさせて、3番目だけを横1列にしたい場合(NG)



<ul class="container">

<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">2</a></li>
<li class="item"><a href="#">3<br>3</a></li>
</ul>

.container {

display: table;
margin: 0 auto;
}
.item {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 180px;
}
.item a {
display: block;
padding: 8px 0;
}

image.png


よく使うパーツ


  • 要素の高さがマチマチで中央揃えをしたいパーツ。

  • ただしflexboxの台頭によって最近は使わなくなってきている。

  • 本来は表組みをレイアウトするためのプロパティ。


float

昔から使われている横並び用のCSS。

レイアウト調整用のCSSと言えばfloatだったが、本来の用途は、特定の要素を左右に寄せて配置するプロパティ。

例えば、文章中の画像に回り込ませる為のCSSでした。

<p>

クスールはWebの技術を中心に “ものづくり”を教える小さな学校です。<img src="http://placehold.it/120x70" alt="">Web制作会社が運営しているので、講師は全員現役のクリエイター。オンラインでは伝えることができない、考える力と制作現場で必要なノウハウを、個人/企業に提供しています。Flash/ActionScript、HTML/CSS/JavaScriptなどのWebの技術を中心としたカリキュラムです。受講者自ら手を動かし、作品制作に必要な技術を身につけることを目的としています。また、イベントの開催、書籍の執筆を行うことで、クリエイターの交流の場や、学ぶ機会を提供しています。
</p>

p {

font-size: 14px;
width: 400px;
}
img {
float: right;
padding: 16px;
margin: 8px;
background-color: #eee;
}

image.png

<nav>

<ul class="container">
<li class="item">1</li>
<li class="item">2<br>2</li>
<li class="item">3</li>
</ul>
</nav>

.container {

overflow: hidden;
width: 600px;
margin: 0 auto;
}
.item {
float: left;
text-align: center;
width: 160px;
padding: 16px 0;
margin-right: 60px;
}
.item:nth-child(3n) {
margin-right: 0;
}

image.png


メリット


  • 子要素の左右の順番を変えることが出来る

  • 長らくレイアウト用に使用されていたプロパティなので、検索すれば大抵の事が解決できる。

  • 子要素にマージンやパディングで余白を調整することが可能。(だが横幅を計算しないと、カラム落ちしてしまう事がある)


デメリット


  • 子要素は文字通りfloat(浮いた)状態になり、親要素の高さが無くなってしまう。


    • 親要素にoverflow: hidden;を使い解決する。(IE7以下を対応する場合は、clearfix)



  • 子要素の高さを内容によって(可変)揃えることが出来ない。(pxなどで固定値を設定すれば可能)

  • 自動的に横幅を均等にすることができないので、親の横幅に対して子要素の横幅を計算しないといけない。


よく使うパーツ


  • 未だにレイアウト用途で利用する事がある。

  • 文章中に画像などを左右に回り込ませて配置する場合。


flexbox

上記の全てのプロパティ(inline-block、table、float)は、レイアウトをコントロールする(横並び)する為のプロパティではありませんでした。

flexboxはWEBサイトをレイアウトする為に生まれ、スマートフォンなどの端末でも最適で柔軟なレイアウトが実現できるプロパティです。(レスポンシブ)


メリット


  • 親要素にdisplay: flex;と指定すれば、子要素が横並びの対象となります。




デメリット


  • レガシーブラウザが対応していない場合がある。


    • IE9は未対応。IE10はdisplay:-ms-flexbox

    • IE11ではflex:1ではなくflex-grow:1としなければならない。

    • Safari8 未満はdisplay: -webkit-flex

    • iOS9 未満はdisplay: -webkit-flex

    • Android 4.3 未満はdisplay: -webkit-box



  • モダンブラウザでも問題がある場合がある


    • flexboxのバグに立ち向かう(flexboxバグまとめ)




Flexboxのプロパティ一覧


container


flex-direction

flex-direction
flexアイテムを並べる方向

row [default]
image.png

row-reverse
image.png

column
image.png

column-reverse
image.png


flex-wrap

flex-wrap
flexアイテムの折り返し

nowrap [default]
image.png

wrap
image.png

wrap-reverse
image.png


justify-content

justify-content
左右位置

flex-start [default]
image.png

flex-end
image.png

center
image.png

space-between
image.png

space-around
image.png


align-item

align-item
上下位置

flex-start
image.png

flex-end
image.png

center
image.png

baseline
image.png

stretch [default]
image.png

(align-selfは省きます)


align-content

※ 「flex-wrap: wrap」が適用され、アイテムが2行になっている場合のみ有効

align-content
行の揃え方

stretch [default]
image.png

flex-start
image.png

flex-end
image.png

center
image.png

space-between
image.png

space-around
image.png


item

flex-grow,flex-shrink,flex-basis
伸縮系プロパティ

flex-grow
初期値: 0

flex-shrink
初期値: 1

flex-basis
初期値: auto

【参考】 幅・伸縮率を指定するflexboxのプロパティ


flex-grow

コンテナ内の余った領域を、各アイテムにどう分配するかの割合


flex-shrink

縮む割合をコンテナ内の余った領域からどう分配するか。

n番目にflex-shrink: 0;を指定した場合、どれだけコンテナが狭くなってもこれ以上は縮まない。


flex-basis

width のようなもの。

flex-direction: column;で縦並びになった際は、heightと同じ効果。


order

order
順番の指定

0 [default]
image.png

1
image.png

-1
image.png

9
image.png


:point_up:Flexの小技:point_up:

:one: liの中にaタグを入れて、そのaタグの内容によって縦を揃えたい場合

以下のようにすれば、aタグの中で縦中央揃えになる

.item {

display: flex;
}
.item a {
display: flex;
align-items: center;
}

:two: スマホ時は、display:blockではなく、flex-directionプロパティを。

.container {

display: flex;
flex-direction: column;
}
@media screen and (min-width:768px) {
.container {
flex-direction: row;
}
}