トッカンソフトウェア

Flexbox

今回はFlexboxを使ってみます。Flexboxを使う場合は、display: flex;を指定します。



横の位置指定(justify-content)

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>CSSのテストページ</title>
	<style type="text/css">
		.oya {
			display: flex;
			/* スペースなしで均等に配置 */
			justify-content: space-between;

			height: 100px;
			width: 400px;
			background-color: green;
		}

		.ko1 {
			height: 40px;
			width: 40px;
		}

		.ko2 {
			height: 60px;
			width: 60px;
		}

		.oya div {
			background-color: yellow;
			border: solid 1px red;
		}
	</style>
</head>

<body>
	<div class="oya">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko2">3</div>
	</div>
</body>

</html>

			
実行イメージ
				
	/* スペースありで均等に配置 */
	justify-content: space-around;

			
実行イメージ
				
	/* 中央に配置 */
	justify-content: center;

			
実行イメージ
				
	/* 先頭に配置 */
	justify-content: flex-start;
	/* 末尾に配置 */
	justify-content: flex-end;

			
イメージ省略

並び順指定(flex-direction)

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>CSSのテストページ</title>
	<style type="text/css">
		.oya {
			display: flex;
			/* 水平方向の降順 */
			flex-direction: row-reverse;

			height: 100px;
			width: 400px;
			background-color: green;
		}

		.ko1 {
			height: 40px;
			width: 40px;
		}

		.ko2 {
			height: 60px;
			width: 60px;
		}

		.oya div {
			background-color: yellow;
			border: solid 1px red;
		}
	</style>
</head>

<body>
	<div class="oya">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko2">3</div>
	</div>
</body>

</html>

			
実行イメージ
				
	/* 垂直方向の昇順 */
	flex-direction: column;

			
実行イメージ
				
	/* 垂直方向の降順 */
	flex-direction: column-reverse;

			
実行イメージ

				
	/* 水平方向の昇順(デフォルト) */
	flex-direction: row;

			
イメージ省略

並び順個別指定(order)

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>CSSのテストページ</title>
	<style type="text/css">
		.oya {
			display: flex;

			height: 100px;
			width: 400px;
			background-color: green;
		}

		.ko1 {
			height: 40px;
			width: 40px;

			/* 並び順の個別指定。マイナスもOK */
			order: 2;
		}

		.ko2 {
			height: 60px;
			width: 60px;

			/* 並び順の個別指定。マイナスもOK */
			order: 1;
		}

		.oya div {
			background-color: yellow;
			border: solid 1px red;
		}
	</style>
</head>

<body>
	<div class="oya">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko2">3</div>
	</div>
</body>

</html>

			
実行イメージ


縦位置の指定(align-items)

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>CSSのテストページ</title>
	<style type="text/css">
		.oya {
			display: flex;
			/* 文字列に揃える */
			align-items: baseline;

			height: 100px;
			width: 400px;
			background-color: green;
		}

		.ko1 {
			font-size: xx-large;
			width: 40px;
		}

		.ko2 {
			width: 40px;
		}

		.oya div {
			background-color: yellow;
			border: solid 1px red;
		}
	</style>
</head>

<body>
	<div class="oya">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko2">3</div>
	</div>
</body>

</html>

			
実行イメージ

				
	/* 中央に揃える */
	align-items: center;

			
実行イメージ

				
	/* 伸ばす */
	align-items: stretch;

			
実行イメージ

				
	/* 先頭に揃える */
	align-items: flex-start;
	/* 末尾に揃える */
	align-items: flex-end;

			
イメージ省略

改行(flex-wrap)と縦位置(align-content)

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>CSSのテストページ</title>
	<style type="text/css">
		.oya {
			display: flex;
			/* 複数行に折り返し */
			flex-wrap: wrap;
			/* スペースなしで均等に配置 */
			align-content: space-between;

			height: 300px;
			width: 70px;
			background-color: green;
		}

		.ko1 {
			height: 40px;
			width: 40px;
		}

		.ko2 {
			height: 60px;
			width: 60px;
		}

		.oya div {
			background-color: yellow;
			border: solid 1px red;
		}
	</style>
</head>

<body>
	<div class="oya">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko2">3</div>
	</div>
</body>

</html>

			
実行イメージ

				
	/* スペースありで均等に配置 */
	align-content: space-around;

			
実行イメージ

				
	/* 中央に配置 */
	align-content: center;

			
実行イメージ

				
	/* 先頭に揃える */
	align-content: flex-start;
	/* 末尾に揃える */
	align-content: flex-end;

			
イメージ省略

拡大率

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>CSSのテストページ</title>
	<style type="text/css">
		.oya1 {
			display: flex;

			width: 300px;
		}

		.oya2 {
			display: flex;

			width: 400px;
		}

		.ko1 {
			/* 拡大率を指定。0は拡大なし */		
			flex-grow: 0;
		}

		.ko2 {
			/* 拡大率を指定 */		
			flex-grow: 1;
		}

		.ko3 {
			/* 拡大率を指定 */		
			flex-grow: 2;
		}

		div {
			background-color: yellow;
			border: solid 1px red;
			height: 40px;
			width: 98px;
		}
	</style>
</head>

<body>
	<div class="oya1">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko3">3</div>
	</div>
	<div class="oya2">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko3">3</div>
	</div>
</body>

</html>


			
実行イメージ


縮小率

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>CSSのテストページ</title>
	<style type="text/css">
		.oya1 {
			display: flex;

			width: 300px;
		}

		.oya2 {
			display: flex;

			width: 250px;
		}

		.ko1 {
			/* 縮小率を指定。0は縮小なし */		
			flex-shrink: 0;
		}

		.ko2 {
			/* 縮小率を指定 */		
			flex-shrink: 1;
		}

		.ko3 {
			/* 縮小率を指定 */		
			flex-shrink: 2;
		}

		div {
			background-color: yellow;
			border: solid 1px red;
			height: 40px;
			width: 100px;
		}
	</style>
</head>

<body>
	<div class="oya1">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko3">3</div>
	</div>
	<div class="oya2">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko3">3</div>
	</div>
</body>

</html>

			
実行イメージ


幅指定

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>CSSのテストページ</title>
	<style type="text/css">
		.oya1 {
			display: flex;

			width: 350px;
			background-color: green;
		}

		.oya2 {
			display: flex;

			width: 250px;
			background-color: green;
		}

		.ko1 {
			/* 幅指定。pxでも%でもOK */		
			flex-basis: 50px;
		}

		.ko2 {
			/* 幅指定。pxでも%でもOK */		
			flex-basis: 100px;
		}

		.ko3 {
			/* 幅指定。pxでも%でもOK */		
			flex-basis: 150px;
		}

		div {
			background-color: yellow;
			border: solid 1px red;
			height: 40px;
			width: 98px;
		}
	</style>
</head>

<body>
	<div class="oya1">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko3">3</div>
	</div>
	<div class="oya2">
		<div class="ko1">1</div>
		<div class="ko2">2</div>
		<div class="ko3">3</div>
	</div>
</body>

</html>

			
実行イメージ



ページのトップへ戻る