flexbox ( 横並びボックス ) 応用

• 1. flexbox とは
• 2. 応用記述
  • 基本
  • 横幅が文字列幅 ( flex-none )
  • 横幅比率が 2 対 1 ( flex-2 )
  • 垂直方向の中央揃え ( items-center )
  • 左右逆並び ( row-reverse )
  • 文字背景・蛍光マーカーを併用
  • 3 列横並び
  • 1 列・文字列幅で水平方向の中央揃え

 

 

1. flexbox とは

 

flexbox とは CSS のプロパティ ( 記述 ) のひとつです。コンテンツの横並びなどが少ないソースで簡単に実現できます。

 

 

 

flexbox はできることが多く、またテーマ側の CSS 容量の関係もあり、記事作成でよく使うと想定されるものをピックアップして予め CSS を準備しています。

 

●準備している CSS

 

 

 

 

 

 

2. 応用記述

 

 

■ 基本

 

• → 記事装飾パーツ一覧 説明箇所
• レスポンシブ時 ( 画面横幅 666 px 以下のスマホ等 ) は横並びは解除されて自動的に縦並びになります
• 1 行目　flexbox　→　flexbox2　に変更するとレスポンシブ時でも横並びになります
• 2 / 3 行目　border　を削除すると罫線は非表示になります

 

 

 

 

 

 

■ 横幅が文字列幅 ( flex-none )

 

• 2 / 5 行目　flex-1　→　flex-none　に変更すると box 横幅が均等ではなく文字列の幅になります
• レスポンシブ時は画面横幅いっぱいに広がります

 

 

 

 

 

 

■ 横幅比率が 2 対 1 ( flex-2 )

 

• 2 行目　flex-1　→　flex-2　に変更すると 左側 box 横幅が右側の 2 倍になります

 

 

 

 

 

 

■ 垂直方向の中央揃え ( items-center )

 

• 1 行目　items-center　を追加すると垂直方向の中央揃えになります

 

 

 

 

 

 

■ 左右逆並び ( row-reverse )

 

• 1 行目　row-reverse　を追加すると逆並びになります
• レスポンシブ時は順並びに戻ります

 

 

 

 

 

 

■ 文字背景・蛍光マーカーを併用

 

• 2 / 5 行目　border　→　b-blue ( 文字背景の記述 ) に変更すると box に色をつけることができます
• m-blue ( 蛍光マーカーの記述 ) も併用できます

 

 

 

 

 

 

■ 3 列横並び

 

• 次のように中の div 要素を 1 つ追加すると 3 列横並びにできます

 

 

 

 

 

 

■ 1 列・文字列幅で水平方向の中央揃え

 

• 1 行目　flex-center　を追加して中の div 要素を　flex-none　で 1 つにすると文字列の幅で水平方向の中央揃えになります

 

 

 

 

• 次のように中の div 要素をリストタグにすることもできます