Mmemo

PC作業に関するメモ

[CSS] flexレイアウトの簡単なデモ

概要

使いやすそうなものをピックアップ。

DEMO

a,b,c

a
b
c

1~15

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
子要素のwidth:
子要素の高さ:
flex-direction:

インライン軸の指定(itemが並ぶ向きの指定)

flex-wrap:

子要素を端まで並べたとき折り返すか否か

justify-content:

インライン軸方向の行ごとの配置方法 ※flex-wrap: nowrapでは無効

align-content:

交差軸方向の行ごとの配置方法 ※flex-wrap: nowrapでは無効

align-items:

交差軸方向の要素ごとの配置方法

その他の便利そうな項目

flex-grow - CSS: カスケーディングスタイルシート | MDN

参考URL

CSS フレックスボックスレイアウト - CSS: カスケーディングスタイルシート | MDN