Flexbox
Flexbox
- 「display: flex;」で、要素を横並びにできます
- 「リストや画像を横並びにしたい」
- 「要素間の余白を均等にして、はみ出たら折り返したい」
- 「表示する順番を逆からにしたい」
- 「画像とテキストを左右交互に配置したい」
Flexboxの性質
- 以下の性質がCSSの記述によって柔軟に変更できます
- 横並びで表示される
- 親要素に合わせて横幅・高さが伸縮する
- HTMLの記述が表示順に影響しない
Flexboxの使い方
- 親要素に「display: flex;」を指定することで、子要素が横並びになります
<ul class="flex-container"> <li class="flex-item">要素1(flex-item)</li> <li class="flex-item">要素2(flex-item)</li> <li class="flex-item">要素3(flex-item)</li> </ul>
ul, li { list-style: none; } .flex-item { list-style: none; background: #1e83ff; color: #fff; padding: 10px; margin: 10px; }
display: flex; で横に並べる
ul, li { list-style: none; } .flex-container { display: flex; } .flex-item { list-style: none; background: #1e83ff; color: #fff; padding: 10px; margin: 10px; }