PrismaCode

Notes on programming.

flexboxのハマりポイント

30 July, 2018

display:flex;は子要素のみに効く

例えばhtmlに,

<div>
    <ul>
        <li>text</li>
        <li>text</li>
    </ul>
</div>

このように書いて「text」2つを横並びにしたいとき,<div>に対してdisplay:flex;をつけても横並びにならない.

これは横並びにしたい<li><div>から見ると孫要素であり,小要素は<ul>であるためである.<ul>は1つしかないので,当然見た目は変わらない.

<li>を横並びにするには,<ul>にdisplay:flex;をつけることで解決できる!

参考:親要素と小要素について

縦と横の向きによってプロパティが異なる

flexboxは横並びだけでなく縦並びでも活躍する.

しかし,縦並びにした際に上下中央配置をしようとしてcssに下記のように書いたけれど効かない,ということが発生する.

.test{
    display:flex;
    flex-direction:column;
    align-items:center;
}

これは,縦方向になると上下左右の方向が変わるためである.

flex-direction:column;の場合,縦方向がjustify-content,横方向がalign-itemsとなる.

正しく動くのは以下.

.test{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

混乱しやすく説明もしづらいが,とりあえずどちらか書いてみて,効かなければもう片方を書いてみると徐々にイメージが掴めてくる.

参考:https://memorandumrail.com/2018/…/03/alignitems-doesnt-work/

その他

大体のレイアウトが載っているサンプル集.

https://www.nxworld.net/tips/flexbox-examples.html

以上だ( `・ω・)b

#html#css