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

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

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

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

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

justify-content 並び方向の寄せ
align-items クロス方向の寄せ
align-self クロス方向の個別指定
align-content 折り返しのアイテムを寄せる
早見表
まとめ

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 -

row

flex-start

row

flex-end

row

center

row

space-between

row

space-around

row-r

flex-start

row-r

flex-end

row-r

center

row-r

space-between

row-r

space-around

rowのメイン軸

justify-content - column -

column

flex-start

column

flex-end

column

center

column

space-between

column

space-around

column-r

flex-start

column-r

flex-end

column-r

center

column-r

space-between

column-r

space-around

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は、並びの方向の垂直の方向（クロス）のアイテムの寄せに使います。

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

rowのメイン軸とクロス軸

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 -

row

stretch

row

flex-start

row

flex-end

row

center

row

baseline

align-items - column -

column

stretch

column

flex-start

column

flex-end

column

center

column

baseline

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

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

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

.items {
  align-self: auto | flex-start | flex-end | center | baseline | stretch
}

初期値	auto
auto	align-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 -

row

flex-start

flex-end

center

baseline small

baseline

baseline big

align-self - coluimn -

column

flex-start

flex-end

center

baseline small

baseline

baseline big

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 折り返し

row

stretch

row

flex-start

row

flex-end

row

center

row

baseline

column

stretch

column

flex-start

column

flex-end

column

center

column

baseline

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

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 -

row

stretch

align-items: stretch, align-content

flex-start

row

stretch

flex-end

row

stretch

center

row

stretch

space-between

row

stretch

space-around

row

stretch

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頼む！

次の投稿

W3C公式ドキュメント

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

justify-content 並び方向の寄せ

ヨコ並び

タテ並び

align-items クロス方向の寄せ

ヨコ並び

タテ並び

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

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

早見表

まとめ

HTML&CSSの本

新着記事

justify-content 並び方向の寄せ

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

ヨコ並び

タテ並び

align-items クロス方向の寄せ

ヨコ並び

タテ並び

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

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

早見表

まとめ

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

HTML&CSSの本

新着記事