Flex-boxとはCSSのレイアウト方法で、横並びや縦並びを簡単に使えるようになる
display: flex;
横並びにしたい要素の親要素に指定する
flex:auto;
子要素を親要素の幅いっぱいに見た目よく設置してくれる
flex-wrap:wrap（親要素指定）
width:50%（子要素指定）
子要素の親要素に指定することで、子要素で％を指定した分折返して表示してくれる。
flex-direction:column
要素の親要素に指定することで、要素を縦に並べることができる
メディアクエリと合わせて使うことによって、PC・ラブレット・スマホ用にそれぞれ使用できる。
@media(max-width:1000px){
.list{
display:flex
flex-wrap:wrap
}など
【要素を横並びにする】
横並びにしたい要素の親要素にdisplay:flexを指定する
【横並びにした要素を画面幅いっぱいにする】
指定した要素の親要素の幅いっぱいにするためにflex:autoを使う
【子要素の幅に応じて折り返す】
要素の親要素にflex-wrap:wrapを使用する。また、子要素の幅を％で指定することで親要素の中で１つの子要素がどれくらいの幅が決めることができる。
【スマホサイズの際に縦に１つず並べる】
スマホやタブレットサイズ別に適用させたい時はメディアクエリ@media()と合わせてflex-direction:columnを使用する。
これは縦に並べたい要素の親要素に適用する
@media(max-width:1000px){
.flex-list{
display:flex;
flex-wrap:wrap;
}
【ブロック要素を中央寄せにするためには】
margin: 0 auto;を指定したい要素に入れると中央寄せにできる
Flexboxプロパティ一覧
