sikaku

CSS flexboxメモ

01
02
03
04

CSSによるflexboxについてのコピペ用メモ

基本

01
02
03
04
HTML
  1. <div class="container">
  2. <div>01</div>
  3. <div>02</div>
  4. <div>03</div>
  5. <div>04</div>
  6. </div>
CSS
  1. .container {
  2. display: flex;
  3. }
  4. .container > * {
  5. padding: 1em;
  6. text-align: center;
  7. }

display: flex;又はdisplay: inline-flex;を指定するだけです。

指定した親要素側はフレックスコンテナに、直下の子要素はフレックスアイテムになります。

後述するプロパティの大半は、親要素への指定用は自身に、子要素への指定用は親要素にdisplay: flex;の指定が無ければ無効になります。

親要素への指定

flex-direction

子要素の配置順序の指定

情報
プロパティ： flex-direction
初期値： row
記述

flex-direction: row;

値
row：
row-reverse：
column：
column-reverse：
01
02
03
04

flex-wrap

子要素の折り返しの指定

情報
プロパティ： flex-wrap
初期値： nowrap
記述

flex-wrap: nowrap;

値
nowrap：
wrap：
wrap-reverse：
01
02
03
04
05
06
07
08

flex-flow

flex-direction(配置順),flex-wrap(折り返し)をまとめて指定

記述例

flex-flow: row wrap;

align-items

親要素に空きがある場合の行の配置指定

flex-direction(配置順序)が左右なら親要素の高さに対する縦位置、上下なら幅に対する横位置の指定となる

情報
プロパティ： align-items
初期値： stretch
記述

align-items: stretch;

値
stretch：
flex-start：
flex-end：
center：
baseline：
01
02
03
04

※視認性向上の為baseline指定時に子要素の高さを変えています

align-content

子要素が複数行に渡り、かつ親要素に空きがある場合の行の配置指定

flex-direction(配置順序)が左右なら親要素の高さに対する縦位置、上下なら幅に対する横位置の指定となる

flex-wrap: nowrap;指定時は無効

情報
プロパティ： align-content
初期値： stretch
記述

align-content: stretch;

値
stretch：
flex-start：
flex-end：
center：
space-around：
space-between：
01
02
03
04
05
06
07
08
09
10
11
12

justify-content

行内に空きがある場合の子要素の配置指定

flex-direction(配置順序)が左右なら親要素の幅に対する横位置、上下なら高さに対する縦位置の指定となる

情報
プロパティ： justify-content
初期値： flex-start
記述

justify-content: flex-start;

値
flex-start：
flex-end：
center：
space-around：
space-between：
01
02
03

place-content

align-content(複数行の行配置),justify-content(行内配置)をまとめて指定

記述例

place-content: space-between flex-start;

子要素への指定

order

配置順の指定

兄弟要素同士の相対で表示が決定される

同値の要素同士はHTMLの規則通り記述順に配置

情報
プロパティ： order
初期値： 0
記述

order: 0;

値

数値(負数可)での指定

：下記へ反映

01
02
03
04

flex-grow

行内に空きがある場合の拡大比率

兄弟要素同士の相対で表示が決定される

情報
プロパティ： flex-grow
初期値： 0
記述

flex-grow: 0;

値

数値(0以上)での指定

：下記へ反映

01
02
03

flex-shrink

行内に収まらない場合の縮小比率

兄弟要素同士の相対で表示が決定される

情報
プロパティ： flex-shrink
初期値： 1
記述

flex-shrink: 1;

値

数値(1以上)での指定

：下記へ反映

01
02
03

※子要素にwidth:50%指定

flex-basis

ベースとなるサイズの指定

flex-direction(配置順序)が左右なら幅、上下なら高さへの指定となる

情報
プロパティ： flex-basis
初期値： auto
記述

flex-basis: auto;

値

width,heightと同仕様(100px,50%等)

：下記へ反映

01
02
03

flex

flex-grow(拡大比率),flex-shrink(縮小比率),flex-basis(ベースサイズ)をまとめて指定

記述例

flex: 99 99 40px;

align-self

align-itemsの個別指定

情報
プロパティ： align-self
初期値： stretch
記述

align-self: stretch;

値
stretch：
flex-start：
flex-end：
center：
baseline：
01
02
03