【Flexbox】フレックスボックスの基本

子要素を縦に並べる：flex-flow:column
子要素を横に並べる：flex-flow:row
- ウィンドウサイズに合わせて幅を可変する：flex:1 1 auto
- ウィンドウサイズに関係なく幅を固定する：flex:0 0 auto
ブロックを並び替える：order:n

子要素を縦に並べる：`flex-flow:column`

子要素を縦に並べるための大事なポイント

親要素に以下を設定する。
- display:flex;
- flex-flow:column;
子要素には何も設定しない。

See the Pen
flex-column by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya{
  display:flex;
  flex-flow:column;
}
.main{
  background-color:skyblue;
  height:200px;
}
.sub{
  background-color:yellow;
  height:100px;
}

子要素を横に並べる：`flex-flow:row`

子要素を横に並べるための大事なポイント

親要素に以下を設定する。
- display:flex;
- flex-flow:row;
子要素には何も設定しない。

See the Pen
flex-row by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya{
  display:flex;
  flex-flow:row;
}
.main{
  background-color:skyblue;
  height:200px;
}
.sub{
  background-color:yellow;
  height:100px;
}

ウィンドウサイズに合わせて幅を可変する：`flex:1 1 auto`

ポイント

親要素に以下を設定する。
- display:flex;
- flex-flow:row;
子要素にはflex:1 1 auto;を設定する。

注意

flex:1 1 autoの場合はwidthが設定されていたとしても、それを無視して、ウィンドウサイズに合わせて幅が可変で変わります。

See the Pen
flex-row-11 by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya{
  display:flex;
  flex-flow:row;
}
.main{
  background-color:skyblue;
  height:200px;
  width:300px;
  flex:1 1 auto;
}
.sub{
  background-color:yellow;
  height:100px;
  width:300px;
  flex:1 1 auto;
}

ウィンドウサイズに関係なく幅を固定する：`flex:0 0 auto`

ポイント

親要素に以下を設定する。
- display:flex;
- flex-flow:row;
子要素にはflex:0 0 auto;を設定する。

See the Pen
flex-row-00 by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya{
  display:flex;
  flex-flow:row;
}
.main{
  background-color:skyblue;
  height:200px;
  width:300px;
  flex:0 0 auto;
}
.sub{
  background-color:yellow;
  height:100px;
  width:300px;
  flex:0 0 auto;
}

ブロックを並び替える：`order:n`

See the Pen
flex-col-11 by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya{
  display:flex;
  flex-flow:row;
}
.main{
  background-color:skyblue;
  height:200px;
  width:300px;
  flex:1 1 auto;
  order:2;
}
.sub{
  background-color:yellow;
  height:100px;
  width:300px;
  flex:1 1 auto;
  order:1;
}