Help us understand the problem. What is going on with this article?

CSS Flexboxを使おう

More than 3 years have passed since last update.

はじめに

この記事は、 OIT Advent Calendar 2016の12日目の記事です。

Flexbox とは?

FlexboxはFlexible Box Layout Moduleの略です。

CSS3から導入されたレイアウトモジュール
floatにサヨナラを告げる機能です。

解説されつくされている感があります。
未だにfloatしてる人は考え直したほうがいいです。

基本的な使い方

親要素にflex指定するだけ。

.flexbox {
  display: flex;
}

やってみる

<ul>
  <li><p>List1</p></li>
    <li><p>List2</p></li>
    <li><p>List3</p></li>
    <li><p>List4</p></li>
    <li><p>List5</p></li>
</ul>

これだけだと

2016-12-12 (1).png

こうなりますが。

これに適当にflexboxすると。

ul {
  display: -webkit-flex;
  display: flex;
  list-style: none;
}

li {
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
  line-hight: 1;
  color: #fff;
  background: #aaffaa;
}

li:first-child {
  background: #aabbcc;
}

li p {
  margin: 0;
  padding: 0;
}

2016-12-12 (2).png

こうなります。

横並びになります。

自動折り返し

上のままだと、ブラウザのスクリーンを小さくすると、

2016-12-12 (3).png

こうなります。

はみ出します。

flex-wrap

ここで紹介したいのが、flex-wrapです。

flex-wrap: wrap;
の1行を追加します。

ul {
  display: -webkit-flex;
  display: flex;
  list-style: none;
  flex-wrap: wrap; /* 折り返し */
}

li {
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
  line-hight: 1;
  color: #fff;
  background: #aaffaa;
  flex-wrap: wrap;
}

li:first-child {
  background: #aabbcc;
}

li p {
  margin: 0;
  padding: 0;
}

2016-12-12 (5).png
2016-12-12 (6).png

なんかいい感じに折り返すようになりました。

Vertical Align(Flexboxの美味しいところ)

floatやJavaScriptで頑張っていたのがウソのように簡単。

以下の3つで設定できます。

  • align-items

flexコンテナ(親要素)に指定し、すべての子要素の垂直方向の配置を設定する。

  • align-self

flexアイテム(子要素)に指定し、個別に垂直方向の配置を設定する。

  • justify-content

flexコンテナ(親要素)に指定し、水平方向の配置を設定する。

ということで、次のように書けば。

.contents {
  display: -webkit-flex;
  display: flex;
  width: 800px;
  height: 400px;
  margin: 20px auto;
  background: #f3f3f2;
  border-radius: 5px;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.align {
  background: rgba(0, 0, 255, 0.3);
  -webkit-flex: none;
  flex: none;
}
<div class="contents">
    <div class="align">
        <p>floatを使っていた時代からは考えられないくらいに垂直中央揃えが楽だ。</p>
    </div>
</div>

2016-12-12 (7).png

こうなります。

Flexbox、最高では?

_EnumHack
迷えるC++プログラマを救う神様をやっています。
caddi
製造業の受発注プラットフォーム「CADDi」を提供しています。 モノづくりに携わるすべての人が、本来持っている力を最大限に発揮できる社会を実現する。産業の常識を変える「新たな仕組み」をつくります。 「CADDi」は金属加工品のCAD・設計図の解析から複雑な物流を表現するUIまで幅広い開発をしており、常に開発環境に最新の技術をとり入れて、より良いプロダクトを作るように心がけております。
https://corp.caddi.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした