LoginSignup
8

More than 5 years have passed since last update.

意外と知らないFlexBoxの挙動

Posted at

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などはあまり使う機会がないかもしれませんが、もし使う時が来た際に参考にしていただけると嬉しいです。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8