217
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated 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;
  }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
217
Help us understand the problem. What are the problem?