基準
box1
box2
box3
display: flex
box1
box2
box3
FlexBox-flex使用するには囲む必要がある
<div class="container">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
.container {
display: flex;
/* 標準の状態で書いてないが適応されているから横並び */
flex-direction: row;
}
direction: column;
box1
box2
box3
.container-column {
display: flex;
flex-direction: column;
}
container: row-reverse;
右から左
box1
box2
box3
.container-row-reverse {
display: flex;
flex-direction: row-reverse;
}
display: flex
一列に詰め込まれる特性があるが大きさが変化
box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13
box14
Flex-wrap
一列に詰め込まれる特性があるので折り返す
box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13
box14
.container-flex-wrap {
display: flex;
flex-wrap: wrap;
}
justify-countent:flex-start;
標準の設定
box1
box2
box3
.container-justify-countent {
display: flex;
justify-content: flex-start;
}
.container-justify-countent-flex-end {
display: flex;
justify-content: flex-end;
}
justify-countent: center;
box1
box2
box3
.container-justify-countent-center {
display: flex;
justify-content: center;
}
justify-countent: space-between;
左右を決めて、真ん中に決める
box1
box2
box3
.container-justify-countent-space-between {
display: flex;
justify-content: space-between;
}
justify-countent: space-around;標準の設定
左右が端まで行かないで、均等に並べる
box1
box2
box3
.container-justify-countent-space-around {
display: flex;
justify-content: space-around;
}
align-items: stretch;
stretch=標準の設定
高さが指定されていないものは高さが指定されているものに合わせる設定
align-litems: flex-start;=>高さの調整がされていないものがあれば、一番高い要素の上ぞろえに全てなる
align-litems: flex-end;=>高さの調整がされていないものがあれば、一番高い要素の下ぞろえに全てなる
box100
box200
box300
<div class="container">
<div class="box100">box100</div>
<div class="box200">box200</div>
<div class="box300">box300</div>
</div>
.container {
display: flex;
align-items: stretch;
}
.box100 {
width: 100px;
height: 200px;
border: 1px solid black;
background-color: bisque;
}
.box200 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
.box300 {
width: 100px;
height: 50px;
border: 1px solid black;
background-color: bisque;
}
align-items: center;
縦方向真ん中
box100
box200
box300
.container-align-items-center {
display: flex;
align-items: center;
}
align-items: center;==justify-content: center;
全体の枠の中の真ん中
box100
box200
box300
<div class="container-container">
<div class="box100">box100</div>
<div class="box200">box200</div>
<div class="box300">box300</div>
</div>
.container-container {
border: 2px solid blue;
/* 高さを指定 */
height: 500px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
align-items: flex-start==justify-content: center;
一番高い要素の上ぞろいになり、真ん中で配置
box100
box200
box300
.container-container-flex-start {
border: 2px solid blue;
height: 500px; /* 高さを指定 */
padding: 10px;
display: flex;
align-items: flex-start;
justify-content: center;
}
組み合わせて使用してみよう
標準状態
box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13
box14
box15
box16
box17
box18
box19
box20
warp-space-between
折り返して表示されて、上下に分かれて真ん中に配置される
box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13
box14
box15
box16
box17
box18
box19
box20
.container-composite-warp-space-between {
display: flex;
border: 2px solid blue;
height: 500px;
padding: 10px;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
}
warp-space-around
折り返して表示されて、上下に余白を作り余り分が真ん中に配置される
box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13
box14
box15
box16
box17
box18
box19
box20
.container-composite-warp-space-around {
display: flex;
border: 2px solid blue;
height: 500px;
padding: 10px;
flex-wrap: wrap;
align-items: center;
align-content: space-around;
}
各子要素について知ろう
各子要素:標準状態
boxA
boxB
boxC
各子要素:order
並び順(数字の番号事に配置)
全ての範囲の要素にいれないと作動しない
boxA
boxB
boxC
.boxA {
order: 2;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
.boxB {
order: 1;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
.boxC {
order: 3;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
各子要素:flex-grow
伸びる幅(width)を指定{flex-grow: 1;=flex-grow: 2;}1:2の割合で表示
Box:設定してあるプロパティ{width: 0;}になってる
boxE
boxF
boxG
.boxE {
/* flex-grow: 1; */
flex-grow: 1;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
.boxF {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
.boxG {
/* flex-grow: 1; の2倍のwidth */
flex-grow: 2;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
各子要素:flex-shrink
幅を縮小(width)を指定
縮小しすぎた要素は、小さくなりすぐるので{flex-basis: 500px;}これ以上縮小させない事も可能
Box:設定してあるプロパティ{width: 0;}になってる
boxE
boxF
boxG
boxI
boxL
.boxI {
/* flex-shrink: 1; */
flex-shrink: 1;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
.boxL {
/* flex-shrink: 2; flex-basis: 300px;*/
flex-shrink: 2;
flex-basis: 300px;
height: 100px;
border: 1px solid black;
background-color: bisque;
}
各子要素:align-self
指定したものを縦方向の設定
分かりにくいかもしれないけど、余使わないと思う
boxH
boxZ
boxJ
.boxH {
width: 100px;
height: 300px;
border: 1px solid black;
background-color: bisque;
}
.boxZ {
width: 100px;
height: 100px;
/* align-self: flex-start; 上からスタート*/
align-self: flex-start;
border: 1px solid black;
background-color: bisque;
}
.boxJ {
width: 100px;
height: 50px;
border: 1px solid black;
background-color: bisque;
}