flexboxは1列の中にコンテンツを平等に配置してくれる優れもの
設定もめちゃくちゃ簡単！
親となるボックスにｃｓｓで
親要素{display: -webkit-flex; /* Safari */
display: flex;}
たったこれだけ。
例：<ul class=”oya”>
<li>子要素</li>
<li>子要素</li>
<li>子要素</li>
</ul>
- 子要素
- 子要素
- 子要素
その中の子要素の<div>や<li>などが自動的に対応してくれます。
縦の中央配置も簡単！
親要素{
align-items: center;
}
子要素の横幅を統一
子要素{
-webkit-flex: 1;
flex: 1;
}
- 子要素
- 子要素
- 子要素
子要素のひとつだけ横幅を広げたい場合
横幅を倍にしたい子要素{
-webkit-flex: 2;
flex: 2;
}
- 子要素
- 子要素
- 子要素
子要素が1列で入りきれなくなったら折り返す
親要素｛flex-wrap: wrap;｝
- 子要素折り返し
- 子要素折り返し
- 子要素折り返し
- 子要素折り返し
- 子要素折り返し
- 子要素折り返し
- 子要素折り返し
- 子要素折り返し
- 子要素折り返し
- 子要素
- 子要素
- 子要素
横幅の中に均等に子要素を配置したい場合は
.親要素{
justify-content: space-around;
}
- 子要素
- 子要素
- 子要素
横幅の中央に子要素を配置
.親要素{
justify-content: center;
}
- 子要素
- 子要素
- 子要素
右側に配置
.親要素{
justify-content: flex-end;
}
- 子要素
- 子要素
- 子要素
はじめの子要素のみ左配置
.親要素:first-child {
margin-right: auto;
}
- 子要素
- 子要素
- 子要素
