css中的flex（弹性）布局

flex 弹性布局

一. flex 解释
1、flex 布局为 flexible BOX 的缩写，意思为弹性布局。
2、块级元素和行内块级元素都可以使用flex布局
3、Webkit内核的浏览器，需要加上-webkit前缀。

二. flex 容器属性

1、flex-direction
此属性决定主轴的方向

.flex{flex-direction: row; // (默认值) 主轴水平方向，从左往右   如图：flex-direction: row-reverse; // 主轴水平方向的逆方向，从右往左flex-direction: column; // 主轴为垂直方向，从上往下flex-direction: column-reverse; // 主轴为垂直方向的逆方向，从下往上
}

2、flex-wrap
此属性定义，如果一条轴线上排列不下，换行的方式

.flex{flex-wrap: nowrap; // （默认）不换行    如图:flex-wrap: wrap; // 正常换行 从上到下    如图：flex-wrap: wrap-reverse; // 逆方向换行 从下到上    如图：
}

3、flex-flow
此属性定义，是flex-direction和flex-wrap的方式；

.flex {flex-flow: <flex-direction>  空格 <flex-wrap>;
}

4、justify-content
此属性定义，项目在主轴上的对齐方式

.flex{justify-content: flex-start; // 左对齐（默认）justify-content: flex-end;    // 右对齐justify-content: center;  // 居中justify-content: space-between; // 两端对齐。且项目间间隔相等justify-content: space-around; // 每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍justify-content:  space-evenly; // 项目间间隔与项目与边框间 间隔均匀分配
}

4、align-items
此属性定义，项目在交叉轴上的对齐方式

.flex{align-items: flex-start; // 交叉轴的起点对齐align-items: flex-end; // 交叉轴的终点对齐align-items:center; // 交叉轴的中点对齐align-items: baseline; // 项目的第一行文字的基线对齐align-items: stretch; // (默认值) 如果项目未设置高度或设为auto ，将充满整父级容器高度
}

4、align-content
此属性定义，多个项目多根轴线的对齐方式，只有一个轴线时没有作用

.flex{align-content: flex-start; // 与交叉轴的起点对齐。align-content: flex-end：// 与交叉轴的终点对齐。align-content: center：// 与交叉轴的中点对齐。align-content: space-between：// 与交叉轴两端对齐，轴线之间的间隔平均分布。align-content: space-around：// 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。align-content: stretch; // （默认值）轴线占满整个交叉轴。
}

以上的属性都是容器的属性

三. flex 项目属性

1、order
此属性决定项目的排列顺序，数值越小。排列越靠前。

.box{order: number; // 默认为 0 ,要讲哪个项目向前移动 将其order设置为负数。
}

2、flex-grow
此属性决定项目的放大比列。

.box{flex-grow: 5; // 默认为 0
}

3、flex-shrink
此属性决定项目的缩小比列。

.item {flex-shrink: number; // 默认为1.要将哪个项目缩小 值设为0 ；
}

3、flex-basis
此属性定义在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

4、flex
此属性定义为 flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item{flex: flex-grow flex-shrink flex-basis; // 简写方式
}

5、align-self
此属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item{align-self: auto; align-self: flex-start;align-self: flex-end;align-self: center;align-self: baseline;align-self: stretch;
}

个人主页 index.dodomun.cn

附代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>flex布局</title><style>h2 {text-align: center;}.flex {width: 500px;margin: 30px auto;background: #cccccc;}.box {width: 30px;height: 30px;margin: 10px;background: #333;text-align: center;line-height: 30px;color: #fff;}.flex1 {display: flex;flex-direction: row;}.flex2 {display: flex;flex-direction: row-reverse;}.flex3 {display: flex;flex-direction: column;}.flex4 {display: flex;flex-direction: column-reverse;}.flex5 {display: flex;flex-wrap: nowrap;}.flex6 {display: flex;flex-wrap: wrap;}.flex7 {display: flex;flex-wrap: wrap-reverse;}.flex8 {display: flex;justify-content: flex-start;}.flex9 {display: flex;justify-content: flex-end;}.flex10 {display: flex;justify-content: center;}.flex11 {display: flex;justify-content: space-between;}.flex12 {display: flex;justify-content: space-around;}.flex13 {display: flex;justify-content: space-evenly;}.flex14 {display: flex;justify-content: space-evenly;align-items: flex-start;}.flex15 {display: flex;justify-content: space-evenly;align-items: flex-end;}.flex16 {display: flex;justify-content: space-evenly;align-items: center;}.flex17 {display: flex;justify-content: space-evenly;align-items: baseline;}.flex18 {display: flex;justify-content: space-evenly;align-items: stretch;}.flex19 {display: flex;height: 240px;flex-wrap: wrap;align-content: flex-start;}.flex20 {display: flex;height: 240px;flex-wrap: wrap;align-content: flex-end;}.flex21 {height: 240px;display: flex;flex-wrap: wrap;align-content: center;}.flex22 {height: 240px;display: flex;flex-wrap: wrap;align-content: space-between;}.flex23 {height: 240px;display: flex;flex-wrap: wrap;align-content: space-around;}.flex24 {height: 240px;display: flex;flex-wrap: wrap;align-content: stretch;}.flex25 {display: flex;flex-direction: row;}.flex25>.box5 {order: -5;}.flex26 {display: flex;flex-direction: row;}.flex26>.box3 {flex-grow: 3;}.flex27 {display: flex;flex-direction: row;}.flex27>.box {flex: 1;}.flex27>.box3 {flex: 0;}.flex28 {height: 150px;display: flex;justify-content: space-evenly;}.flex28>.box3{align-items: auto;}.flex29 {height: 150px;display: flex;justify-content: space-evenly;}.flex29>.box3{align-self: flex-start;}.flex30 {height: 150px;display: flex;justify-content: space-evenly;}.flex30>.box3{align-self: flex-end;}.flex31 {height: 150px;display: flex;justify-content: space-evenly;}.flex31>.box3{align-self: center;}.flex32 {height: 150px;display: flex;justify-content: space-evenly;}.flex32>.box3{line-height: 50px;align-self: baseline;}</style>
</head><body><h2>1.flex-direction: row</h2><div class="flex flex1"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>2.flex-direction: row-reverse</h2><div class="flex flex2"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>3.flex-direction: column</h2><div class="flex flex3"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>4.flex-direction: column-reverse</h2><div class="flex flex4"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>5.flex-wrap: nowrap</h2><div class="flex flex5"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div></div><h2>6.flex-wrap: wrap</h2><div class="flex flex6"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div></div><h2>7.flex-wrap: wrap-reverse</h2><div class="flex flex7"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div><div class="box">5</div></div><h2>8.justify-content: flex-start</h2><div class="flex flex8"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>9.justify-content: flex-end</h2><div class="flex flex9"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>10.justify-content: center</h2><div class="flex flex10"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>11.justify-content: space-between</h2><div class="flex flex11"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>12.justify-content: space-around</h2><div class="flex flex12"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>13.justify-content: space-evenly</h2><div class="flex flex13"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div><h2>14.align-items: flex-start</h2><div class="flex flex14"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div></div><h2>15.align-items: flex-end</h2><div class="flex flex15"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div></div><h2>16.align-items: center</h2><div class="flex flex16"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div></div><h2>17.align-items: baseline</h2><div class="flex flex17"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div></div><h2>18.align-items: stretch</h2><div class="flex flex18"><div class="box" style="height: auto">1</div><div class="box" style="height: auto">2</div><div class="box" style="height: auto">3</div><div class="box" style="height: auto">4</div><div class="box" style="height: auto">5</div></div><h2>19.align-content: flex-start</h2><div class="flex flex19"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div><div class="box" style="height: 25px">6</div><div class="box" style="height: 40px">7</div><div class="box" style="height: 50px">8</div><div class="box" style="height: 60px">9</div><div class="box" style="height: 55px">10</div><div class="box" style="height: 25px">11</div><div class="box" style="height: 40px">12</div><div class="box" style="height: 50px">13</div><div class="box" style="height: 60px">14</div><div class="box" style="height: 55px">15</div></div><h2>20.align-content: flex-end</h2><div class="flex flex20"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div><div class="box" style="height: 25px">6</div><div class="box" style="height: 40px">7</div><div class="box" style="height: 50px">8</div><div class="box" style="height: 60px">9</div><div class="box" style="height: 55px">10</div><div class="box" style="height: 25px">11</div><div class="box" style="height: 40px">12</div><div class="box" style="height: 50px">13</div><div class="box" style="height: 60px">14</div><div class="box" style="height: 55px">15</div></div><h2>21.align-content: center</h2><div class="flex flex21"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div><div class="box" style="height: 25px">6</div><div class="box" style="height: 40px">7</div><div class="box" style="height: 50px">8</div><div class="box" style="height: 60px">9</div><div class="box" style="height: 55px">10</div><div class="box" style="height: 25px">11</div><div class="box" style="height: 40px">12</div><div class="box" style="height: 50px">13</div><div class="box" style="height: 60px">14</div><div class="box" style="height: 55px">15</div></div><h2>22.align-content: space-between</h2><div class="flex flex22"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div><div class="box" style="height: 25px">6</div><div class="box" style="height: 40px">7</div><div class="box" style="height: 50px">8</div><div class="box" style="height: 60px">9</div><div class="box" style="height: 55px">10</div><div class="box" style="height: 25px">11</div><div class="box" style="height: 40px">12</div><div class="box" style="height: 50px">13</div><div class="box" style="height: 60px">14</div><div class="box" style="height: 55px">15</div></div><h2>23.align-content: space-around</h2><div class="flex flex23"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div><div class="box" style="height: 25px">6</div><div class="box" style="height: 40px">7</div><div class="box" style="height: 50px">8</div><div class="box" style="height: 60px">9</div><div class="box" style="height: 55px">10</div><div class="box" style="height: 25px">11</div><div class="box" style="height: 40px">12</div><div class="box" style="height: 50px">13</div><div class="box" style="height: 60px">14</div><div class="box" style="height: 55px">15</div></div><h2>24.align-content: stretch</h2><div class="flex flex24"><div class="box" style="height: 25px">1</div><div class="box" style="height: 40px">2</div><div class="box" style="height: 50px">3</div><div class="box" style="height: 60px">4</div><div class="box" style="height: 55px">5</div><div class="box" style="height: 25px">6</div><div class="box" style="height: 40px">7</div><div class="box" style="height: 50px">8</div><div class="box" style="height: 60px">9</div><div class="box" style="height: 55px">10</div><div class="box" style="height: 25px">11</div><div class="box" style="height: 40px">12</div><div class="box" style="height: 50px">13</div><div class="box" style="height: 60px">14</div><div class="box" style="height: 55px">15</div></div><h2>1. order (项目5的order值为 -1)</h2><div class="flex flex25"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div><h2>2. flex-grow (项目3的值为3)</h2><div class="flex flex26"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div><h2>3. flex-shrink (项目3的值为0)</h2><div class="flex flex27"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div><h2>4. align-self: auto</h2><div class="flex flex28"><div class="box box1" style="height: 25px">1</div><div class="box box2" style="height: 40px">2</div><div class="box box3" style="height: 50px">3</div><div class="box box4" style="height: 60px">4</div><div class="box box5" style="height: 55px">5</div></div><h2>5. align-self: flex-start</h2><div class="flex flex29"><div class="box box1" style="height: 25px">1</div><div class="box box2" style="height: 40px">2</div><div class="box box3" style="height: 50px">3</div><div class="box box4" style="height: 60px">4</div><div class="box box5" style="height: 55px">5</div></div><h2>6. align-self: flex-end</h2><div class="flex flex30"><div class="box box1" style="height: 25px">1</div><div class="box box2" style="height: 40px">2</div><div class="box box3" style="height: 50px">3</div><div class="box box4" style="height: 60px">4</div><div class="box box5" style="height: 55px">5</div></div><h2>7. align-self: center</h2><div class="flex flex31"><div class="box box1" style="height: 25px">1</div><div class="box box2" style="height: 40px">2</div><div class="box box3" style="height: 50px">3</div><div class="box box4" style="height: 60px">4</div><div class="box box5" style="height: 55px">5</div></div><h2>8. align-self: baseline</h2><div class="flex flex32"><div class="box box1" style="height: 25px">1</div><div class="box box2" style="height: 40px">2</div><div class="box box3" style="height: 50px">3</div><div class="box box4" style="height: 60px">4</div><div class="box box5" style="height: 55px">5</div></div>
</body></html>