flexを使って遊ぶ

上下左右の中央配置

何かと需要のある上下左右の中央をとるあれのサンプル。非常にシンプル。

<div class="vertical-horizontal"><span>vertical-horizontal</span></div>

.vertical-horizontal{

	height:50vh;

	flex-flow:row wrap;

	display:flex;

	place-content:center;

	background:tomato;

	color:white;

}

flexでのmargin

<div class="margin">

	<div>1</div>

	<div>2</div>

	<div>3</div>

	<div>4</div>

</div>

.margin{

	padding:0;

	display:flex;

	flex-flow:row wrap;

	background:tomato;

	color:white;

}

.margin > div{

	flex:0 0 20%;

	margin:5%;

	background:skyblue;

}

gap

chrome88でgapプロパティが対応。

.gap{

	display:flex;

	flex-flow:row wrap;

	gap:5rem;

	background:tomato;

	color:white;

}

.gap > div{

	height:5rem;

	flex:1 0 30%;

	background:skyblue;

}