CSS flex box について
CSSでflexboxを使用すると、要素を横並びや縦方向に並べることができる。
親要素に使用するとフレックスコンテナとなり、子要素はフレックスアイテムとなる。
横方向に並べる
display: flex; /*デフォルトは justify-content: flex-start; となる。*/
justify-content: flex-start; /*左揃え*/
justify-content: flex-end; /*右揃え*/
justify-content: center; /*中央揃え*/
justify-content: space-between; /*子要素同士の間に均等に間隔をあける*/
justify-content: space-around; /*周囲に均等に間隔をあける*/
垂直に並べる
display: flex;
align-items: flex-start; /*上揃え*/
align-items: flex-end; /*下揃え*/
align-items: center; /*中央揃え*/
align-items: baseline; /*ベースラインを揃える*/
align-items: stretch; /*全ての要素の高さを揃える*/
行をそろえる(複数行)
display: flex;
align-content: flex-start; /*上揃え*/
align-content: flex-end; /*下揃え*/
align-content: center; /*中央揃え*/
align-content: space-between; /*均等に間隔をあける*/
align-content: space-around; /*周囲に均等に間隔をあける*/
}
↧