Flex布局

弹性布局，css3中的flex属性，在布局中做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。

1.flex 布局的子元素不会脱离文档流

相比float来做布局，float属性的元素会脱离文档流，而且会涉及到各种BFC、清除浮动的问题

2.弹性盒子 子元素

** 弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器**。

子元素/弹性元素：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。

3.主轴和侧轴

主轴默认是水平方向，弹性盒子的子元素默认从左到右排列，子元素在没有宽度的情况下,会坍缩到内容的大小

可以通过flex-direction: 改变主轴方向

row

row-reverse

column

column-reverse

3.主轴的对齐方式

/* 向起始位置对齐

justify-content: flex-start; */

/* 向结束位置对齐

justify-content: flex-end;

/* 向行中间位置对齐

justify-content: center; */

/* 平均的分配到行里

justify-content: space-around; */

/* 第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。(常用)

justify-content: space-between; */

/* 子元素于子元素的距离完全相等

justify-content: space-evenly; */

4 侧轴单行元素的对齐方式

/* align-items(重点 针对的是单行) */

/* 元素在侧轴的起始位置对齐。

align-items: flex-start; */

/* flex-end： 元素在侧轴的结束位置对齐。

align-items: flex-end;

*/

/* center： 元素在侧轴上居中对齐。(常用)

align-items: center; */

/* 当没有设置宽度的情况下，将元素宽度拉伸至侧轴大小 */

5.侧轴单多行元素的对齐方式

/* 多行文本充满主轴，没法设置对齐方式

比如子元素设置成百分形式，充满轴 */

/* align-content是多行文本在侧轴的对齐方式 */

/* 各行向侧轴的起始位置堆叠。

align-content:flex-start ; */

/* 全部 各行向弹性盒容器的结束位置堆叠。

align-content: flex-end; */

/* 全部各行向弹性盒容器的中间位置堆叠。

align-content: center;

*/

/* 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。

align-content: space-between;

*/

/* 在侧轴平均分布

align-content: space-around;

*/

6.元素换行

flex-direction: row; /* 元素装不下会自动坍缩，不会换行 */

flex-wrap: nowrap;/* 不换行 */

/* flex-wrap: wrap; 换行*/

7.flex属性

flex: 1(份数)

子元素通过设置flex属性达到分配弹性盒子空间的效果

实现自适应效果：

左边固定，右边自适应 左边盒子写宽高，右边盒子设置flex:1

右边固定，左边自适应 右边盒子写宽高，左边盒子设置flex:1

左右固定，中间自适应 左、右边盒子写宽高，中间盒子设置flex:1

补充1：让容器里的文字垂直水平对齐，

先flex父盒子，在设置justify-content:center;

align-items:center(单行) / align-content:center

补充2：骰子的四点制作

先给类four主轴为竖直方向，两个item两端对齐

.four {

border: 1px solid black;

display: flex;

flex-direction: column;

/* 在竖直主轴上两端对齐 */

justify-content: space-between;

}

再让item弹性，并且两端对齐

.four .item {

display: flex;

/* item里主轴仍是水平方向 */

/* 在水平主轴上两端对齐 */

justify-content: space-between;

}