image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flexBoxDemo</title>
<style>
/*
display:flex
容器的屬性有：
flex-direction //item方向
flex-wrap //換行
flex-flow //flex-direction flex-wrap組合
justify-content //主軸是否居中
align-items //容器內(nèi)的item的對(duì)齊方式
align-content //交叉軸的對(duì)齊方式
項(xiàng)目的屬性有：
order //item的前后位置
flex-grow //item的放大比例
flex-shrink //item的縮小比例
flex-basis //item占主軸的空間大小
flex //flex-grow flex-shrink flex-basis的組合
align-self //item獨(dú)自對(duì)齊方式
*/
.box {
width: 80%;
margin: 0 auto;
}
.flex-box{
background-color: #d7d6d9;
/*設(shè)定容器*/
display:flex;
margin:10px
}
.box-1 {
/*
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
flex-direction: row(默認(rèn)，橫軸) | row-reverse | column(縱軸) | column-reverse;
*/
flex-direction: row;
align-items: center;
}
.box-2 {
/*
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box{ flex-wrap: nowrap(不換行，默認(rèn)) | wrap(換行) | wrap-reverse; }
*/
flex-wrap: wrap;
}
.box-3{
/*
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap
*/
flex-flow:row wrap;
}
.box-4 {
/*
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
.box {
justify-content: flex-start（開始位置，默認(rèn)）
| flex-end（結(jié)束位置）
| center（中部）
| space-between（兩端對(duì)齊，同等間距）
| space-around;（item兩側(cè)的間隔相等，兩側(cè)離邊框有間隔） }
*/
justify-content: space-around;
flex-flow:row wrap;
}
.box-5 {
/*
align-items屬性定義了項(xiàng)目在交叉軸上的對(duì)齊方式。
.box {
align-item: flex-start（開始位置，默認(rèn)）
| flex-end（結(jié)束位置）
| center（中部）
| baseline（項(xiàng)目的第一行文字的基線對(duì)齊）
| stretch;（如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。） }
*/
align-items: center;
flex-flow: row wrap;
}
.box-6 {
/*
align-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
.box {
justify-content: flex-start（開始位置，默認(rèn)）
| flex-end（結(jié)束位置）
| center（中部）
| space-between（兩端對(duì)齊，同等間距）
| space-around;（item兩側(cè)的間隔相等，兩側(cè)離邊框有間隔） }
| stretch;（如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)整個(gè)交叉軸。）
*/
align-content:center;
flex-flow:row wrap;
}
.box-item {
width: 200px;
height: auto;
display: flex;
align-items: center;
/*align-content: center;*/
justify-content: center;
margin: 5px;
background-color: #FFD200;
font-size: 100px;
color: #ffffff;
}
.item-tall {
height: 400px;
}
.box-tall{
height: 800px;
}
.order-item {
order:-1;/*數(shù)值越小排列越靠前*/
}
/*
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。
如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
*/
.flex-grow-item1 {
flex-grow:1/*default 0*/
}
.flex-grow-item3 {
flex-grow:3/*default 0*/
}
/*
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。
如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。
負(fù)值對(duì)該屬性無效。
*/
.flex-shrink-item {
flex-shrink: 0;/*該項(xiàng)不縮小*/
}
/*
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。
瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
*/
.flex-base-item {
flex-basis: 300px;
}
/*
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
*/
.flex-auto-item {
flex:2 0 300px
}
.align-self-item {
/*
align-items屬性定義了項(xiàng)目在交叉軸上的對(duì)齊方式。
.box {
align-align-self: auto繼承父元素的align-items屬性,若父元素不存在align-times屬性則默認(rèn)為strtch
| flex-start（開始位置，默認(rèn)）
| flex-end（結(jié)束位置）
| center（中部）
| baseline（基線以第一個(gè)元素為標(biāo)準(zhǔn)）
| stretch;（如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。） }
*/
align-self:baseline;
}
</style>
</head>
<body>
<div class="box">
<div class="flex-box box-1">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
</div>
<div class="flex-box box-2">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
<div class="box-item">6</div>
<div class="box-item">7</div>
<div class="box-item">8</div>
<div class="box-item">9</div>
</div>
<div class="flex-box box-3">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
<div class="box-item">6</div>
<div class="box-item">7</div>
<div class="box-item">8</div>
<div class="box-item">9</div>
</div>
<div class="flex-box box-4">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
<div class="box-item">6</div>
<div class="box-item">7</div>
<div class="box-item">8</div>
<div class="box-item">9</div>
</div>
<div class="flex-box box-5">
<div class="box-item">1</div>
<div class="box-item item-tall">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
<div class="box-item">6</div>
<div class="box-item">7</div>
<div class="box-item item-tall">8</div>
<div class="box-item">9</div>
</div>
<div class="flex-box box-6 box-tall">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
<div class="box-item">6</div>
<div class="box-item">7</div>
<div class="box-item">8</div>
<div class="box-item">9</div>
<div class="box-item">10</div>
<div class="box-item">11</div>
<div class="box-item">12</div>
<div class="box-item">13</div>
<div class="box-item">14</div>
<div class="box-item">15</div>
<div class="box-item">16</div>
<div class="box-item">17</div>
<div class="box-item">18</div>
<div class="box-item">19</div>
</div>
<div class="flex-box box-1 ">
<div class="box-item flex-grow-item1">1</div>
<div class="box-item flex-grow-item1">2</div>
<div class="box-item flex-grow-item1">3</div>
<div class="box-item flex-grow-item1">4</div>
<div class="box-item order-item flex-grow-item3">5</div>
</div>
<div class="flex-box box-1 ">
<div class="box-item ">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item flex-base-item flex-shrink-item">5</div>
</div>
<div class="flex-box box-1 ">
<div class="box-item ">1</div>
<div class="box-item ">2</div>
<div class="box-item ">3</div>
<div class="box-item flex-auto-item">4</div>
<div class="box-item flex-auto-item">5</div>
</div>
<div class="flex-box box-1 ">
<div class="box-item item-tall">1</div>
<div class="box-item ">2</div>
<div class="box-item ">3</div>
<div class="box-item align-self-item">4</div>
<div class="box-item">5</div>
</div>
</div>
</body>
</html>
