要素を並べるのにfloat: left;使ってるけど、他にも並べる方法ないかなあ
参考サイト→https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox1
随時更新します
Flexboxを使ってみよう
FlexboxとはFlexible Box Layout Moduleの略。左から順に並べられるのは勿論、右からや下からなど自由に要素をレイアウト出来る。
基本
flex_box01.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブロックとインライン</title>
<link rel="stylesheet" href="css/flex_box01.css">
</head>
<body>
<div class="container01">
<div class="item">
アイテム 1
</div>
<div class="item">
アイテム 2
</div>
<div class="item">
アイテム 3
</div>
<div class="item">
アイテム 4
</div>
</div>
</body>
</html>
flex_box01.css
.container01 {
display: flex;
}
.item {
margin: 10px 10px;
padding: 2px 4px;
background: #f8dcdc;
}
`display: flex;`を親要素に適用し、子要素が横に並んだ。
Flexboxで親要素に指定するプロパティ
htmlは上と同じ。
flex-direction: row;
flex_box02.css
.container01 {
display: flex;
flex-direction: row;
}
.item {
~省略~
}
右から左へ並ぶ
flex-direction: row-reserve;
flex_box03.css
.container01 {
display: flex;
flex-direction: row-reverse;
}
.item {
~省略~
}
左から右へ並ぶ
flex-direction: column;
flex_box04.css
.container01 {
display: flex;
flex-direction: column;
}
.item {
~省略~
}
上から下へ並ぶ
flex-direction: column-reverse;
flex_box05.css
.container01 {
display: flex;
flex-direction: column-reverse;
}
.item {
~省略~
}
下から上へ並ぶ
flex-wrap: nowrap;
説明のために数を増やした
flex_box02.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブロックとインライン</title>
<link rel="stylesheet" href="css/flex_box.css">
</head>
<body>
<div class="container02">
<div class="item">
アイテム 1
</div>
<div class="item">
アイテム 2
</div>
<div class="item">
アイテム 3
</div>
<div class="item">
アイテム 4
</div>
<div class="item">
アイテム 5
</div>
<div class="item">
アイテム 6
</div>
<div class="item">
アイテム 7
</div>
<div class="item">
アイテム 8
</div>
<div class="item">
アイテム 9
</div>
<div class="item">
アイテム 10
</div>
</div>
</body>
</html>
flex_box06.css
body {
~省略~
}
.container02 {
margin: 10px auto;
display: flex;
flex-wrap: nowrap;
}
.item {
~省略~
}
折り返しなしで一行で並ぶ
flex-wrap: wrap;
flex_box06.css
body {
~省略~
}
.container02 {
margin: 10px auto;
display: flex;
flex-wrap: wrap;
}
.item {
~省略~
}
子要素が折り返して複数行になり、**上から下へ**並ぶ
flex-wrap: wrap-reverse;
flex_box07.css
body {
~省略~
}
.container02 {
margin: 10px auto;
display: flex;
flex-wrap: wrap-reverse;
}
.item {
~省略~
}
子要素が折り返して複数行になり、**下から上へ**並ぶ
flex-flow: ;
flex_box08.css
.container02 {
margin: 10px auto;
display: flex;
flex-flow: row-reverse nowrap;
}
flex-directionとflex-wrapを一行で指定できるプロパティ。
justify-content: flex-start;
flex_box09.css
.container02 {
margin: 10px auto;
display: flex;
justify-content: flex-start;
}
10個だと分かりにくかったので5個にした。親要素に空いているスペースがあるとき、子要素を**水平方向のどの位置に置くか指定**。
`flex-start`は左揃えになる。
justify-content: flex-end;
flex_box10.css
.container02 {
margin: 10px auto;
display: flex;
justify-content: flex-end;
}
`flex-end`は右揃えになる
justify-content: flex-center;
flex_box11.css
.container02 {
margin: 10px auto;
display: flex;
justify-content: flex-center;
}
`flex-center`は中央揃えになる
justify-content: space-between;
flex_box12.css
.container02 {
margin: 10px auto;
display: flex;
justify-content: space-between;
}
最初の子要素を左端、最後の子要素を右端に配置し、残りの要素は均等に間隔をあけて配置