カテゴリー別アーカイブ: Flexbox

CSS3 Flexbox を学ぶ 8

Flexbox には柔軟なレイアウトを実現するために, 様々なプロパティが定義されています. 今回は, その1つである flex-grow について紹介します.

flex-grow は, これまでのプロパティと異なり, コンテナ内の要素に指定します.

まずは, ざっとコードを見てみましょう.

結果はこうなります

flex-grow
flex-grow

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. 大きさを変えたいコンテナ内の要素に, で flex-grow: 2 (Safari対策に,-webkit-flex-grow: 2) のように指定する

CSS3 Flexbox を学ぶ 7

Flexbox には柔軟なレイアウトを実現するために, 様々なプロパティが定義されています. 今回は, その1つである order について紹介します.

order は, これまでのプロパティと異なり, コンテナ内の要素に指定します.

まずは, ざっとコードを見てみましょう.

結果はこうなります

order
order

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. コンテナ内の要素に, 並び変えたい順序で order: 3 (Safari対策に, -webkit-order: 3) のように指定する

CSS3 Flexbox を学ぶ 6

Flexbox には柔軟なレイアウトを実現するために, 様々なプロパティが定義されています. 今回は, その1つである align-content について紹介します.

align-content には以下の6つの値を設定できます

  • stretch
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

まずは, ざっとコードを見てみましょう.

結果はこうなります

stretch
stretch
flex-start
flex-start
center
center
space-between
space-between
space-between
space-between
space-around
space-around

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. 要素を包括するコンテナとなる要素に
align-items: (stretch|flex-start|flex-end|center|space-between|space-around)  (Safari対策に,
align-items : -webkit-***) を指定する

CSS3 FLEXBOX を学ぶ 5

Flexbox には柔軟なレイアウトを実現するために, 様々なプロパティが定義されています. 今回は, その1つである align-items について紹介します.

align-items には以下の5つの値を設定できます

  • stretch
  • flex-start
  • flex-end
  • center
  • baseline

まずは, ざっとコードを見てみましょう.

結果はこうなります

stretch
stretch
flex-start
flex-start
flex-end
flex-end
center
center
baseline
baseline

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. 要素を包括するコンテナとなる要素に
align-items: (stretch|flex-start|flex-end|center|baseline)  (Safari対策に,
align-items : -webkit-***) を指定する

CSS3 Flexbox を学ぶ 4

Flexbox には柔軟なレイアウトを実現するために, 様々なプロパティが定義されています. 今回は, その1つである justify-content について紹介します.

justify-content には以下の5つの値を設定できます

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

まずは, ざっとコードを見てみましょう.

結果はこうなります

 justify-content: flex-start
justify-content: flex-start
 justify-content: flex-end
justify-content: flex-end
 justify-content: center
justify-content: center
 justify-content: space-between
justify-content: space-between
 justify-content: space-around
justify-content: space-around

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. 要素を包括するコンテナとなる要素にjustify-content: (flex-start|flex-end|center|space-between|space-around)  (Safari対策に,justify-content : -webkit-***) を指定する

CSS3 Flexbox を学ぶ 3

Flexboxで要素を,横並び・縦並びにする方法は紹介しました.
しかし, 要素の合計幅が, 親コンテナの幅を超えた場合はどうなるのでしょうか ?

Flexboxには, それを制御するための flex-wrap とプロパティが定義されています.
flex-wrap には以下の3つの値を設定できます.

  • nowrap
  • wrap
  • wrap-reverse

まずは, ざっとコードを見てみましょう.

結果はこうなります.

flex-wrap: nowrap
flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap
flex-wrap: wrap-reverse
flex-wrap: wrap-reverse

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. 要素を包括するコンテナとなる要素に flex-wrap: nowrap (Safari対策に, -webkit-flex-wrap: nowrap) を指定する.

3. 要素を包括するコンテナとなる要素に flex-wrap: wrap (Safari対策に, -webkit-flex-wrap: wrap) を指定する.

4. 要素を包括するコンテナとなる要素に flex-wrap: wrap-reverse (Safari対策に, -webkit-flex-wrap: wrap-reverse) を指定する.

 

CSS3 Flexbox を学ぶ 2

前回は, flex-direction: row を指定して, 横カラムレイアウトを実装しました.
今回は, flex-direction: column を利用して, 立て並びのレイアウトを実装してみましょう.

まずは, ざっとコードを見てみましょう.

結果はこうなります.

flex-direction: column
flex-direction: column
flex-direction: column-reverse
flex-direction: column-reverse

ポイントは2つだけです.

1. カラムレイアウトを実装したい要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. カラムレイアウトを実装したい要素を包括するコンテナとなる要素に flex-direction: column (Safari対策に, -webkit-flex-direction: column) を指定する. あるいは, 下側から並べたい場合は, flex-direction: column-reverse (Safari対策に, -webkit-flex-direction: column-reverse) を指定する

CSS3 Flexbox を学ぶ 1

Flexbox とは ?

簡単に表現すれば, 「柔軟なレイアウトを簡単に実装する」ために CSS3 で定義されたレイアウトのためのプロパティです.

… といっても具体的どうできるのかわからないと思いますで, これから何回か記事をわけて基本的なことを解説していきます.

カラムレイアウトをFlexboxで実装する

Flexboxが定義されるまでは, float と clearfix で実装するのが定石でしたが, Flexboxを利用することでより簡単に実装できます.

まずは, ざっとコードを見てみましょう.

結果はこうなります.

Flexbox カラムレイアウト
Flexbox カラムレイアウト

ポイントは2つだけです.

1. カラムレイアウトを実装したい要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. カラムレイアウトを実装したい要素を包括するコンテナとなる要素に flex-direction: row (Safari対策に, -webkit-flex-direction: row) を指定する. あるいは, 右側から並べたい場合は, flex-direction: row-reverse (Safari対策に, -webkit-flex-direction: row-reverse) を指定する