はじめに
本記事では、HTMLの初めの方に学習するFlexboxについて記述します。
HTMLをほぼ１ヶ月ぶりに学習しているため、リハビリがてらです。
Flexboxとは
親要素に、display:flex;
を記述すると子要素が横並びになります。
もともと縦並びだったものが横並びに変わったということです。
その子要素たちの並び順や要素同士の幅は、
詳細に決めることができ、その方法を、Flexboxといいます。
justify-contentプロパティ
主軸方向,x軸（初期値は水平方向）の配置を決めることができます。
*justify...整える、揃えるという意味。
過去に投稿している記事を参照ください。
align-itemsプロパティ
交差軸方向,y軸(初期値は垂直方向)の配置の詳細を決めることができます。
*align...物を一直線に合わせる、一直線に並べるという意味で使うそうです。
以下は、
justify-content: space-around;した上で
alignのコードを記述し、画像を添付しています。
上揃え
align-items: flex-start;
下揃え
align-items: flex-end;
中央揃え
align-items: flex-center;
終わりに
現在、デザイン性をあげるべくHTML/CSSの訓練を再度開始しました！
明日からはそこに焦点を当てて頑張っていきたいと思います！！
明日も頑張ります！！
↧