2019/12/19

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

HTML＆CSS

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

スポンサードサーチ

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

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

display: flex;　横並びにする

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

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

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

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

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

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

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

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

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

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

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

プログラミング

• facebook
• Tweet
• Read Later