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

意外と知らないFlexBoxの挙動

More than 1 year has passed since last update.

FlexBoxとは?

今更ではありますが、親要素にdisplay: flexを指定することで、子要素をいい感じに並べてくれる便利なものです。
例えば

sample.html
<div class="parent">
    <p class="child">子要素1</p>
    <p class="child">子要素2</p>
</div>

このhtmlに対して

sample.css
.parent {
    width: 500px;
    padding: 10px;
    background-color: #e8f7ff;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}

こんなスタイルを書くと
スクリーンショット 2018-09-08 16.15.15.png
こんな感じに並びます。

CSSに1行足してFlexBoxにすると、

sample.css
.parent {
    width: 500px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex; /* 追加 */
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}

スクリーンショット 2018-09-08 16.18.06.png
こう並びます。
justify-contentなどを使うことで、左右両端揃えや中央揃えなども思いのままという便利なプロパティです。
このdisplay: flexと組み合わせて使うプロパティの中で、flex-directionというものが存在するのですが、ご存知でしょうか?
今回はこのflex-directionについてちょっとだけ書いてみようと思います。

flex-directionとは?

先ほどのdisplay: flexですが、FlexBoxにした親要素に対して指定するプロパティで、子要素の並べ方を指定するものです。
実はこれを使うと、子要素を縦に並べたり逆から並べたりできます。
具体的には

sample.css
.parent {
    width: 500px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    flex-direction: column; /* 追加 */
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}

こうすることで、子要素は
スクリーンショット 2018-09-08 16.25.03.png
こんな感じで縦に並びます。
では、例えば親要素の高さを変えて、justify-content: space-betweenを指定するとどうなるでしょう。

sample.css
.parent {
    width: 500px;
    height: 300px; /* 追加 */
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    justify-content: space-between; /* 追加 */
    flex-direction: column;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}

スクリーンショット 2018-09-08 16.28.55.png
縦幅に合わせて上下両端揃えになります。
通常のFlexBoxだと左右両端揃えになるので、これはちょっと意外でした。

また、flex-direction: column-reverseを使うとどうなるでしょうか。

sample.css
.parent {
    width: 500px;
    height: 300px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}

スクリーンショット 2018-09-08 16.34.10.png
こんな感じで子要素がひっくり返ります。
ここで、justify-content: flex-startを使うと…

sample.css
.parent {
    width: 500px;
    height: 300px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    justify-content: flex-start;
    flex-direction: column-reverse;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}

スクリーンショット 2018-09-08 16.35.23.png
startなのに下に寄りました。
reverseとあるように、箱自体がひっくり返ったようになり、子要素は逆から並ぶようになります。

同様に、flex-direction: row-reverseを使うと

sample.css
.parent {
    width: 500px;
    height: 300px;
    padding: 10px;
    background-color: #e8f7ff;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}
.child {
    width: 100px;
    padding: 5px;
    background-color: #f8a0a1;
}

スクリーンショット 2018-09-08 16.40.11.png
同じように逆から並びます。

こんな感じで、flex-directionjustify-contentを組み合わせると結構面白いことができます。

まとめ

  • 横に並べるときはflex-direction: row(デフォルト)
  • 縦に並べるときはflex-direction: column
  • flex-direction: row-reverseでひっくり返すと、justify-contentの揃え方も逆になる

実際に目で見て触ってみないと分からないことは多いですよね。
flex-directionreverseをつけるとjustify-contentの揃え方も逆になるのは、当然と言えば当然ですがちょっと驚きでした。
flex-direction: column-reverseなどはあまり使う機会がないかもしれませんが、もし使う時が来た際に参考にしていただけると嬉しいです。

参考

http://www.htmq.com/css/flex-direction.shtml

taiki-hanaoka
beatmaniaエンジニア(八段)
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
ユーザーは見つかりませんでした