flex
2019.04.10 Wed
flexよく使うCSS
基本CSS
FLEXBOXの基本形
display: flex;
flex-direction: row;/*子要素を並べる方向 他に column*/
justify-content: flex-start;
flex-wrap: wrap;
align-items
上下中央
align-items: center;
下揃え
align-items: flex-end;
高さをそろえない
align-items: baseline;
justify-content
右端揃え
justify-content: flex-end;
左右中央揃え
justify-content: center;
均等に並べる
justify-content: space-between;
子要素同士に余白を空けたくない場合は、子要素にwidth: 100%を追加。
flex-direction
子要素を左端揃え(親要素に記述)
flex-direction: row;
子要素を縦方向揃え(親要素に記述)
flex-direction: column;
横並び要素の高さを揃える
親要素の場合
align-items: center;
子要素の場合
子要素にdisplay: flex;を追加してから、下記を追加
align-items: center;
親要素に対して子要素の幅を100%。aなどを幅一杯にする場合など(親要素に記述)
flex-grow: 1; など
孫要素の高さを合わせ、要素の中身を上下中央に揃える
ulなどの親要素に
display: flex;
liなどの子要素に
display: flex;
aなどの孫要素に
display: flex;
align-items: center;
width: 100%;
justify-content: center;
text-align: center;