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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
css3 image
イラストACの画像をもとに加工しています。

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

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

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

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つのパターンがあります。

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

 

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

まずは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

 

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

rowとcolumnで、ヨコ向き・タテ向きのちがいがあります。また、***と***-reverseで、端に寄せるものが逆転します。

***と***-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 image
rowのメイン軸とクロス軸
flex-direction column image
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-contentalign-itemsalign-content
flex-startflex-endcenterspaece-betweenspace-aroundflex-startflex-endcenterbaselinestretchflex-startflex-endcenterspace-betweenspace-aroundstretch
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プロパティですが、余白をコントロールするプロパティを分かっていないと自動的なサイズ変更に振り回されるので注意しましょう。

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

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

前のページ
かんたんCSS3 flex アイテムの拡大・縮小・サイズを操作する

 

HTML&CSSの本
post-cta-image

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

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


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!