ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

かんたんCSS3 flex, 左(上)・中央・右(下)に寄せて余白を操作する

css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

CSS3のフレックスは、コンポーネントの配置を変える便利な機能です。

アイテムのサイズや余白サイズが自動で配分されるので、アイテムサイズと余白の操作はとても重要です。

今回はアイテムの余白を操作します。いま、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

justify-content 並び方向の寄せ

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around
}
初期値flex-start
flex-start並びの初めの方に寄せる
flex-end並びの終わりの方に寄せる
center中央寄せ
space-between端のアイテムを領域の端に配置して、間の余白を均等に割り当てる
space-aroundアイテムの両端の余白を均等に割り当てる
|または。or

例

.container {
  justify-content: center;
}

 

コンテナに指定します。

アイテムの並びの方向で余白をコントロールします。5つのパターンがあります。

  • 左（右）寄せ
  • 右（左）寄せ
  • 中央寄せ
  • 均等（両端の余白なし）
  • 均等（両端の余白あり）

 

じっさいにサンプルコードを実行していきます。その前に、フレックスの並びの方向について知っておく必要があります。もし、分からないという人はこちらから。

css3 image

かんたんCSS3 flex サクッと並びとその方向を変える方法

tadtadya.com

 

まずはCSSです。

ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

CSS
.sample .container .box {
  background: rgba(255, 144, 130, 0.7);
  color: #fff;
  margin: 3px;
  padding: 0 3px;
  text-align: center;
}
.sample .container {
  background: rgba(130, 255, 144, 0.2);
  margin: 10px 0;
  padding: 3px;
}
.sample .flex {
  display: flex;
}

.sample .height {
  height: 200px;
}
.sample .container .color-box2 {
  background: rgba(130, 215, 255, 0.7);
}
.sample .direction-row-reverse {
  flex-direction: row-reverse;
}
.sample .direction-column {
  flex-direction: column;
}
.sample .direction-column-reverse {
  flex-direction: column-reverse;
}
.sample .justify-content-flex-end {
  justify-content: flex-end;
}
.sample .justify-content-center {
  justify-content: center;
}
.sample .justify-content-space-between {
  justify-content: space-between;
}
.sample .justify-content-space-around {
  justify-content: space-around;
}

次にHTMLです。一気に表示します。

ヨコ並び

row,flex-satrt
<div class="sample">
<div class="container flex">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">flex-start</div>
  <div class="box color-box2">e</div>
</div>
</div>
row,flex-end
<div class="sample">
<div class="container flex justify-content-flex-end">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">flex-end</div>
  <div class="box color-box2">e</div>
</div>
</div>
row,center
<div class="sample">
<div class="container flex justify-content-center">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">center</div>
  <div class="box color-box2">e</div>
</div>
</div>
row,space-between
<div class="sample">
<div class="container flex justify-content-space-between">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">space-between</div>
  <div class="box color-box2">e</div>
</div>
</div>
row,space-around
<div class="sample">
<div class="container flex justify-content-space-around">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">space-around</div>
  <div class="box color-box2">e</div>
</div>
</div>
row-reverse,flex-satrt
<div class="sample">
<div class="container flex direction-row-reverse">
  <div class="box color-box2">s</div>
  <div class="box">row-r</div>
  <div class="box">flex-start</div>
  <div class="box color-box2">e</div>
</div>
</div>
row-reverse,flex-end
<div class="sample">
<div class="container flex direction-row-reverse justify-content-flex-end">
  <div class="box color-box2">s</div>
  <div class="box">row-r</div>
  <div class="box">flex-end</div>
  <div class="box color-box2">e</div>
</div>
</div>
row-reverse,center
<div class="sample">
<div class="container flex direction-row-reverse justify-content-center">
  <div class="box color-box2">s</div>
  <div class="box">row-r</div>
  <div class="box">center</div>
  <div class="box color-box2">e</div>
</div>
</div>
row-reverse,space-between
<div class="sample">
<div class="container flex direction-row-reverse justify-content-space-between">
  <div class="box color-box2">s</div>
  <div class="box">row-r</div>
  <div class="box">space-between</div>
  <div class="box color-box2">e</div>
</div>
</div>
row-reverse,space-around
<div class="sample">
<div class="container flex direction-row-reverse justify-content-space-around">
  <div class="box color-box2">s</div>
  <div class="box">row-r</div>
  <div class="box">space-around</div>
  <div class="box color-box2">e</div>
</div>
</div>

タテ並び

column,flex-satrt
<div class="sample">
<div class="container flex direction-column height">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">flex-start</div>
  <div class="box color-box2">e</div>
</div>
</div>
column,flex-end
<div class="sample">
<div class="container flex direction-column height justify-content-flex-end">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">flex-end</div>
  <div class="box color-box2">e</div>
</div>
</div>
column,center
<div class="sample">
<div class="container flex direction-column height justify-content-center">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">center</div>
  <div class="box color-box2">e</div>
</div>
</div>
column,space-between
<div class="sample">
<div class="container flex direction-column height justify-content-space-between">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">space-between</div>
  <div class="box color-box2">e</div>
</div>
</div>
column,space-around
<div class="sample">
<div class="container flex direction-column height justify-content-space-around">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">space-around</div>
  <div class="box color-box2">e</div>
</div>
</div>
column-reverse,flex-satrt
<div class="sample">
<div class="container flex direction-column-reverse height">
  <div class="box color-box2">s</div>
  <div class="box">column-r</div>
  <div class="box">flex-start</div>
  <div class="box color-box2">e</div>
</div>
</div>
column-reverse,flex-end
<div class="sample">
<div class="container flex direction-column-reverse height justify-content-flex-end">
  <div class="box color-box2">s</div>
  <div class="box">column-r</div>
  <div class="box">flex-end</div>
  <div class="box color-box2">e</div>
</div>
</div>
column-reverse,center
<div class="sample">
<div class="container flex direction-column-reverse height justify-content-center">
  <div class="box color-box2">s</div>
  <div class="box">column-r</div>
  <div class="box">center</div>
  <div class="box color-box2">e</div>
</div>
</div>
column-reverse,space-between
<div class="sample">
<div class="container flex direction-column-reverse height justify-content-space-between">
  <div class="box color-box2">s</div>
  <div class="box">column-r</div>
  <div class="box">space-between</div>
  <div class="box color-box2">e</div>
</div>
</div>
column-reverse,space-around
<div class="sample">
<div class="container flex direction-column-reverse height justify-content-space-around">
  <div class="box color-box2">s</div>
  <div class="box">column-r</div>
  <div class="box">space-around</div>
  <div class="box color-box2">e</div>
</div>
</div>
justify-content - row -
s
row
flex-start
e
s
row
flex-end
e
s
row
center
e
s
row
space-between
e
s
row
space-around
e
s
row-r
flex-start
e
s
row-r
flex-end
e
s
row-r
center
e
s
row-r
space-between
e
s
row-r
space-around
e

 

flex-direction: row-reverse 画像
rowのメイン軸
justify-content - column -
s
column
flex-start
e
s
column
flex-end
e
s
column
center
e
s
column
space-between
e
s
column
space-around
e
s
column-r
flex-start
e
s
column-r
flex-end
e
s
column-r
center
e
s
column-r
space-between
e
s
column-r
space-around
e
flex-direction: column-reverse 画像
columnのメイン軸

rowとcolumnで、ヨコ・タテの向きが変わります。また、reverseの有無で端に寄せるものが逆転しアイテムの順序も逆転します。

ここで、『アイテムの並びと同じ方向だけしかできないのか？』という疑問があるでしょう。フレックスにはもう一方の方向もできます。

ここで変更した並びの方向はメイン軸です。

align-items クロス方向の寄せ

.container {
  align-items: flex-start | flex-end | center | baseline | stretch
}
初期値stretch
flex-startクロス軸の初めの方に寄せる
flex-endクロス軸の終わりの方に寄せる
center中央寄せ
baselineアイテムをベースラインで揃える
stretchアイテムを伸ばす。余白を残さない
|または。or

例

.container {
  align-items: center;
}

コンテナに指定します。

justify-contentはアイテムの並び方向の寄せでした。align-itemsは、並びの方向の垂直の方向（クロス）のアイテムの寄せに使います。

『クロス』がイメージしづらいかもしれないので図をもう一度見てみましょう。

flex-direction: row-reverse 画像
rowのメイン軸とクロス軸
flex-direction: column-reverse 画像
columnのメイン軸とクロス軸

クロス軸の寄せには5つのパターンがあります。

  • 上（左）寄せ
  • 下（右）寄せ
  • 中央寄せ
  • アイテムのベースライン
  • 寄せずにアイテムを伸ばす

じっさいにサンプルコードを実行していきます。まずはCSSです。さっきのCSSにクラスを追加します。

CSS
// baseline確認用
.sample .font-small {
  font-size: .5em;
}
.sample .font-big {
  font-size: 1.5em;
}
.sample .underline {
  text-decoration: underline;
}

.sample .align-items-flex-start {
  align-items: flex-start;
}
.sample .align-items-flex-end {
  align-items: flex-end;
}
.sample .align-items-center {
  align-items: center;
}
.sample .align-items-baseline {
  align-items: baseline;
}

ベースライン確認用のフォントサイズを変えるのと、align-itemsのデフォルト（stretch）以外を用意しました。

次にHTMLです。align-itemsプロパティでは、reverseの有無で結果は同じです。クロス軸の方向が同じだから。

***-reverseは省略します。さっきと同じように一気に表示します。

ヨコ並び

row,stretch
<div class="sample">
<div class="container flex height">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">stretch</div>
  <div class="box color-box2">e</div>
</div>
</div>
row,flex-satrt
<div class="sample">
<div class="container flex align-items-flex-start height">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">flex-start</div>
  <div class="box color-box2">e</div>
</div>
</div>
row,flex-end
<div class="sample">
<div class="container flex align-items-flex-end height">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">flex-end</div>
  <div class="box color-box2">e</div>
</div>
</div>
row,center
<div class="sample">
<div class="container flex align-items-center height">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">center</div>
  <div class="box color-box2">e</div>
</div>
</div>
row,baseline
<div class="sample">
<div class="container flex align-items-baseline height">
  <div class="box color-box2 underline">s</div>
  <div class="box font-small underline">row</div>
  <div class="box font-big underline">baseline</div>
  <div class="box color-box2 underline">e</div>
</div>
</div>

タテ並び

column,stretch
<div class="sample">
<div class="container flex direction-column">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">stretch</div>
  <div class="box color-box2">e</div>
</div>
</div>
column,flex-satrt
<div class="sample">
<div class="container flex direction-column align-items-flex-start">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">flex-start</div>
  <div class="box color-box2">e</div>
</div>
</div>
column,flex-end
<div class="sample">
<div class="container flex direction-column align-items-flex-end">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">flex-end</div>
  <div class="box color-box2">e</div>
</div>
</div>
column,center
<div class="sample">
<div class="container flex direction-column align-items-center">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">center</div>
  <div class="box color-box2">e</div>
</div>
</div>
column,baseline
<div class="sample">
<div class="container flex direction-column align-items-baseline">
  <div class="box color-box2 underline">s</div>
  <div class="box underline">column</div>
  <div class="box underline">baseline</div>
  <div class="box color-box2 underline">e</div>
</div>
</div>
align-items - row -
s
row
stretch
e
s
row
flex-start
e
s
row
flex-end
e
s
row
center
e
s
row
baseline
e

 

align-items - column -
s
column
stretch
e
s
column
flex-start
e
s
column
flex-end
e
s
column
center
e
s
column
baseline
e

あたりまえですが、タテ向きでベースラインは揃えることができません。結果はflex-startです。

align-itemsはアイテムごとにも指定できます。align-selfプロパティです。

align-self クロス方向の個別指定

.items {
  align-self: auto | flex-start | flex-end | center | baseline | stretch
}
初期値auto
autoalign-itemsを継承する
flex-startクロス軸の初めの方に寄せる
flex-endクロス軸の終わりの方に寄せる
center中央寄せ
baselineアイテムをベースラインで揃える
stretchアイテムを伸ばす。余白を残さない
|または。or

例

.items {
  align-self: center;
}

アイテムに指定します。

align-sefプロパティは、align-itemsを個別に指定するものです。指定する値はalign-itemsと同じで、それに加えてautoがあります。

autoは、align-itemsプロパティの値をそのまま使います。

じっさいにサンプルコードを実行しましょう。まずはCSSです。さっきのCSSにクラスを追加します。

CSS
.sample .align-self-flex-start {
  align-self: flex-start;
}
.sample .align-self-flex-end {
  align-self: flex-end;
}
.sample .align-self-center {
  align-self: center;
}
.sample .align-self-baseline {
  align-self: baseline;
}
.sample .align-self-stretch {
  align-self: stretch;
}

次にHTMLです。

align-self - row -
<div class="sample">
<div class="container flex height">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box align-self-flex-start">flex-start</div>
  <div class="box align-self-flex-end">flex-end</div>
  <div class="box align-self-center">center</div>
  <div class="box align-self-baseline underline font-small">baseline small</div>
  <div class="box align-self-baseline underline">baseline</div>
  <div class="box align-self-baseline underline font-big">baseline big</div>
  <div class="box color-box2">e</div>
</div>
</div>
align-self - column -
<div class="sample">
<div class="container flex direction-column">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box align-self-flex-start">flex-start</div>
  <div class="box align-self-flex-end">flex-end</div>
  <div class="box align-self-center">center</div>
  <div class="box align-self-baseline underline font-small">baseline small</div>
  <div class="box align-self-baseline underline">baseline</div>
  <div class="box align-self-baseline underline font-big">baseline big</div>
  <div class="box color-box2">e</div>
</div>
</div>
align-self - row -
s
row
flex-start
flex-end
center
baseline small
baseline
baseline big
e
align-self - coluimn -
s
column
flex-start
flex-end
center
baseline small
baseline
baseline big
e

align-content 折り返しのアイテムを寄せる

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch
}
初期値stretch
flex-start並びの初めの方に寄せる
flex-end並びの終わりの方に寄せる
center中央寄せ
space-between端のアイテムを領域の端に配置して、間の余白を均等に割り当てる
space-aroundアイテムの両端の余白を均等に割り当てる
stretchアイテムを伸ばす。余白を残さない
|または。or

折り返しがある場合のみ有効。1行の場合は効果がない。

例

.container {
  align-content: center;
}

コンテナに指定します。

align-itemsプロパティでは、折り返しのとき、余白を行間に均等に配分します。サンプルコードで見てみましょう。

CSSに新しいクラスを追加します。

CSS
.sample	.wraps {
  flex-wrap: wrap;
}

HTMLは、コンテナのクラスを変更してアイテムの数を増やします。

HTML
<div class="sample">
<div class="container wraps flex height-250px">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box color-box2">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps align-items-flex-start height-250px">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">flex-start</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps align-items-flex-end height-250px">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">flex-end</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps align-items-center height-250px">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">center</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps align-items-baseline height-250px">
  <div class="box color-box2 underline">s</div>
  <div class="box font-small underline">row</div>
  <div class="box font-big underline">baseline</div>
  <!-- 省略 -->
  <div class="box color-box2 underline">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps direction-column height">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">stretch</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps direction-column align-items-flex-start height">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">flex-start</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps direction-column align-items-flex-end height">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">flex-end</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps direction-column align-items-center height">
  <div class="box color-box2">s</div>
  <div class="box">column</div>
  <div class="box">center</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
</div>
<div class="sample">
<div class="container flex wraps direction-column align-items-baseline height">
  <div class="box color-box2 underline">s</div>
  <div class="box underline">column</div>
  <!-- 省略 -->
  <div class="box color-box2 underline">e</div>
</div>
</div>

HTMLの結果を表示します。

align-items 折り返し
s
row
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
e
s
row
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
e
s
row
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
e
s
row
center
center
center
center
center
center
center
center
center
center
e
s
row
baseline
baseline
baseline
baseline
baseline
baseline
baseline
baseline
baseline
baseline
e
s
column
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
e
s
column
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
flex-start
e
s
column
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
flex-end
e
s
column
center
center
center
center
center
center
center
center
center
center
e
s
column
baseline
baseline
baseline
baseline
baseline
baseline
baseline
baseline
baseline
baseline
e

アイテムの配置が変わりますが、ぜんぶ行間に余白を配分しています。

align-items（align-self）は、1行に詰めたときのアイテムの寄せには使えますが、折り返しの行間まではコントロールできません。

（アイテム全体では寄せてくれません。）

そこで、align-contentプロパティを使います。align-contentはアイテムの寄せを行いながら、折り返しの行間も寄せてくれます。

align-contentは、align-itemsの機能 + 折り返しの行間の寄せまで行う。

じっさいにサンプルコードを実行します。今度は、align-contentプロパティを使います。まずはCSSから。

CSSに新しいクラスを追加します。

CSS
.sample .align-content-flex-start {
  align-content: flex-start;
}
.sample .align-content-flex-end {
  align-content: flex-end;
}
.sample .align-content-center {
  align-content: center;
}
.sample .align-content-space-between {
  align-content: space-between;
}
.sample .align-content-space-around {
  align-content: space-around;
}

次にHTMLです。

HTML
<div class="sample">
<div>align-content:flex-start</div>
<div class="container flex wraps height-250px align-content-flex-start">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box">stretch</div>
  <div class="box color-box2">e</div>
</div>
<div>align-content:flex-end</div>
<div class="container flex wraps height-250px align-content-flex-end">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">stretch</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
<div>align-content:center</div>
<div class="container flex wraps height-250px align-content-center">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">stretch</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
<div>align-content:space-between</div>
<div class="container flex wraps height-250px align-content-space-between">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">stretch</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
<div>align-content:space-around</div>
<div class="container flex wraps height-250px align-content-space-around">
  <div class="box color-box2">s</div>
  <div class="box">row</div>
  <div class="box">stretch</div>
  <!-- 省略 -->
  <div class="box color-box2">e</div>
</div>
</div>

align-itemsのHTMLに、コンテナのクラスを追加します。（align-content-***）

HTML結果には、align-contentを入れる前も表示して比べます。

before - align-items: stretch -
s
row
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
e
align-items: stretch, align-content
flex-start
s
row
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
e
flex-end
s
row
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
e
center
s
row
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
e
space-between
s
row
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
e
space-around
s
row
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
stretch
e
  • align-items(align-self)は、1行詰めのクロス軸の寄せに使う
  • align-contentは、折り返しの複数行のクロス軸の寄せに使う

早見表

justify-content, align-items(align-self), align-contentの余白の寄せの早見表を作りました。

justify-content align-items align-content
flex-start flex-end center spaece-between space-around flex-start flex-end center baseline stretch flex-start flex-end center space-between space-around stretch
row 左 右 中央 均等(*1) 均等(*2) 上 下 中央 baseline 伸ばす 上 下 中央 均等(*1) 均等(*2) 伸ばす
row-reverse 右 左 - - - - - - - - - - - - - -
column 上 下 中央 均等(*1) 均等(*2) 左 右 中央 baseline 伸ばす 左 右 中央 均等(*1) 均等(*2) 伸ばす
column-reverse 下 上 - - - - - - - - - - - - - -

*1: 両端に空白なし
*2: 両端に空白あり
- : 同上

align-selfはalign-itemsと同じ。autoは、align-itemsを継承する。

まとめ

フレックスを使って、アイテムの寄せ、余白のコントロールの方法をご紹介しました。

フレックスは、余白の配分やアイテムの拡大・縮小があったりして、width, heightどおりにサイズが固定されることはあまりありません。

アイテムのサイズをコントロールする基準はflexプロパティですが、余白をコントロールするプロパティを分かっていないと自動的なサイズ変更に振り回されるので注意しましょう。

フレックスのすごいところはこれだけではありません。まだまだほかにもあります。

ここで説明すると長くなるのでとりあえずここまでにします。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ
前の投稿
かんたんCSS3 flex, アイテムの拡大・縮小・サイズを操作する
一番かんたんなスムーズスクロールの実装。CSSだけでできるが...。Apple頼む！
次の投稿
css3 image

かんたんCSS3 ぜんぶ解説。誰でも分かるflexの使い方

tadtadya.com

W3C公式ドキュメント

 

  1. ホーム /
  2. 中級者 - Webマスターへの道 /
  3. CSS3 /
  4. かんたんCSS3 flex, 左(上)・中央・右(下)に寄せて余白を操作する

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。

コメントを残す

*

新着記事