目次
基本的な使い方
CSSで、「display: flex;」を設定することで横並びにレイアウトをすることが可能。
See the Pen bGqEEjq by yuichi (@yhamada1205) on CodePen.
配置方向の設定
配置方向の設定は、「flex-direction」で設定をする。
折り返しの設定
折り返しの設定は、「flex-wrap」で設定をする。
水平方向の設定
水平方向の設定は、「justify-content」で設定をする。
justify-content:space-between
均等に配置。先頭は左揃え、末尾は右揃えに配置。
See the Pen RwprobR by yuichi (@yhamada1205) on CodePen.
justify-content:space-around
均等に配置。両端に半分の間隔を置く。
See the Pen PopZbqm by yuichi (@yhamada1205) on CodePen.
justify-content:space-evenly
均等に配置。両端へ均等に間隔を置く。
See the Pen abJdBde by yuichi (@yhamada1205) on CodePen.
垂直方向の設定
垂直方向の設定は、「align-items」で設定をする。
垂直方向(高さを揃える)の設定
垂直方向(高さを揃える)の設定は、「align-items」で設定をする。
align-content:space-between
均等に配置。先頭は上揃え、末尾は下揃えに配置。
See the Pen align-content: space-between; by yuichi (@yhamada1205) on CodePen.
align-content:space-around
均等に配置。上下に半分の間隔を置く。
See the Pen align-content: space-around; by yuichi (@yhamada1205) on CodePen.
align-content:space-evenly
均等に配置。上下にへ均等に間隔を置く。
See the Pen align-content: space-evenly; by yuichi (@yhamada1205) on CodePen.