【CSS】flex-boxとは？ ～要素の並びを自在にする方法～
【CSS】flex-boxの解説です。読み方は「フレキシボックス」
要素を横並びにする方法を知りたい方はこちらで解決します💡
もくじ
●display: flex; 横並びにする
●flex: auto; 親要素の幅に合わせて子要素の幅を伸ばす
●flex-wrap: wrap; 並べた子要素を折り返す
●flex-direction: column 子要素を縦並びにする
●flex-boxに似た効果を持つCSS
スポンサードサーチ
【CSS】flex-boxとは？ ～要素の並びを自在にする方法～
具体的に解説していきます。
display: flex; 横並びにする
☝このようにリストなどがある時に役に立つCSSです。
☟横並びにしたい要素の『親要素』に対して、画像のようにCSSを入れるだけです。
flex: auto; 親要素の幅に合わせて子要素の幅を伸ばす
☝こちらの画像の通り、子要素に対してCSSを入れると、子要素が親要素の幅いっぱいに伸びます。
flex-wrap: wrap; 並べた子要素を折り返す
☝まず、親要素に画像の通りCSSを入れる。
☟子要素には、どのくらいの幅で折り返すのかwidthで指示を与える。こちらの画像の場合、50％なので、要素が２つ並んだ段階で折り返すという指示になります。
flex-direction: column 子要素を縦並びにする
☝このように親要素にCSSを入れることで、子要素を縦並びにすることができます。スマホ用の画面では要素が横に並びきらない事が多いので、この機能を使うケースが増えます。
●指定する数値は整数である必要があるので、単位つけたり、小数点をつけないよう注意が必要です。
flex-boxに似た効果を持つCSS
●float・・・要素を横並びにする方法