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;
}
flexコンテナ(親要素)に指定するプロパティ
flex-direction | flexアイテムの並び方を指定する |
flex-wrap | flexアイテムの折り返しを指定する |
flex-flow | flexアイテムの並び方と折り返しを指定する |
justify-content | flexアイテムの横の配置を指定する |
align-items | flexアイテムの高さを揃える
|
---|
align-content | flexアイテムの縦の配置を指定する |
---|