Flexboxを使ってみる

実際にどう書くのか、どうなるのか、以下を見ながらコードを書いてみると理解しやすいかと。
基礎編で例として載せた猫の画像の横並びレイアウトをつくってみます。
A1a1a1e6 084d 4b37 8bba 4cda02bac2f4
これです。まずは元になるHTMLとCSSを作成。

<ul class="main-box">
    <li>
        <ul class="sub-box">
            <li><img src="img/img_cat01.jpg"></li>
            <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li>
            <li><a class="btn" href="">ボタン</a></li>
        </ul>
    </li>
    <li>
        <ul class="sub-box">
            <li><img src="img/img_cat02.jpg"></li>
            <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li>
            <li><a class="btn" href="">ボタン</a></li>
        </ul>
    </li>
    <li>
        <ul class="sub-box">
            <li><img src="img/img_cat03.jpg"></li>
            <li>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</li>
            <li><a class="btn" href="">ボタン</a></li>
        </ul>
    </li>
</ul>
a {
    display: inline-block;
    text-decoration: none;    
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    width: 250px;
}
.btn {
    padding: 10px 20px;
    color: #fff;
    background: #FF9800;
}
.main-box > li {
    margin: 10px;
}
.sub-box {
    height: 100%;
    box-sizing: border-box;
    margin: 0 10px;
    padding: 10px 25px;
    border: 1px solid #ddd;
}
.sub-box li {
    margin-bottom: 10px;
}

89779e9e 9e63 4b62 b930 24c3702f177c
こんな感じ。
一番外枠のulである.main-box要素にdisplay:flex;を加えてみると

.main-box {
    display: flex;
}

E5b9b1ee 1cea 4634 9ff0 036a78966669
横並びに!
floatの様にいちいち解除する必要はありません……簡単すぎる……。
でも横幅が揃っていませんね。それも簡単に調整出来ます。
flexプロパティなるものを使います。詳しい説明は省略しますが、flex-growflex-shrinkflex-basisという3つのプロパティのショートハンドです。

.main-box > li {
    flex: 1 1 0%;
}

3293e14d 2da6 4708 96f6 6d8ae1197e00
横幅が揃いました!このflexプロパティ、かなり重要です
次は各要素の中身を中央寄せ、ボタンは下部で揃えます。

.sub-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
}
.sub-box li:last-child {
    margin: 0;
    margin-top: auto;
}

完成です!
flex-directionで子要素の配置方向、align-itemsで垂直方向の揃え方を指定しています。
ボタンの位置はmargin-top:auto;で下部に揃います。
Flexboxは自動的に一番長いボックスに高さを合わせてくれるので、こういったレイアウトも難なく出来るので本当に便利です。

レスポンシブ化も簡単

このままだと画面の横幅を縮めると、はみ出た部分が見えなくなってしまいます。
flex-wrapプロパティで子要素が親要素の長さを超えた場合、自動的に折り返すか否かの設定が出来ます。

.main-box {
    flex-wrap: wrap;
}

画面の横幅を縮めてみてください。
幅によって2カラム、1カラムと自動的に変わってくれます!

Flexboxは使い方に慣れてしまえば豊富なレイアウトが可能なので、是非使ってみてください。

Shere
  • はてなブログ
  • Twitter
  • Facebook
Flexboxでレイアウトがラクになる(実践編)

Writer

  • Name

    星香

  • Position

    フロント兼デザイナーになる予定

  • Profile

    つねに眠い。