【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

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

子要素を縦に並べる: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;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です