【CSS】flex-boxとは? ~要素の並びを自在にする方法~ | MUKKUN QUEST
MUKKUN QUEST     

【CSS】flex-boxとは? ~要素の並びを自在にする方法~

HTML&CSS

【CSS】flex-boxの解説です。読み方は「フレキシボックス」
要素を横並びにする方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】flex-boxとは? ~要素の並びを自在にする方法~

具体的に解説していきます。

display: flex; 横並びにする


☝このようにリストなどがある時に役に立つCSSです。

☟横並びにしたい要素の『親要素』に対して、画像のようにCSSを入れるだけです。

flex: auto; 親要素の幅に合わせて子要素の幅を伸ばす

☝こちらの画像の通り、子要素に対してCSSを入れると、子要素が親要素の幅いっぱいに伸びます。

flex-wrap: wrap; 並べた子要素を折り返す

☝まず、親要素に画像の通りCSSを入れる。
☟子要素には、どのくらいの幅で折り返すのかwidthで指示を与える。こちらの画像の場合、50%なので、要素が2つ並んだ段階で折り返すという指示になります。

flex-direction: column 子要素を縦並びにする

☝このように親要素にCSSを入れることで、子要素を縦並びにすることができます。スマホ用の画面では要素が横に並びきらない事が多いので、この機能を使うケースが増えます。

●指定する数値は整数である必要があるので、単位つけたり、小数点をつけないよう注意が必要です。

flex-boxに似た効果を持つCSS

●float・・・要素を横並びにする方法