css样式之flex弹性盒布局

一、在了解flex布局前首先要了解CSS常见的布局方式有哪些？

1、包括弹性布局、固定布局、流体布局、混合布局、绝对定位布局等

二、什么是弹性布局

1、弹性布局：flex，全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性

2、怎么使用flex

要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器，任何一个容器都可以指定成为Flex布局，但是在设为Flex布局后,其子元素的float(浮动)、clear(规定元素哪一侧不允许浮动)和vertical-align(元素垂直对齐方式)属性将失效。其子元素就会直接变成flex元素

3、flex的两根轴

在flex里存在两根轴：水平的主轴和垂直的交叉轴

三、弹性盒的常用属性

（1）flex-direction：设置主轴的方向，有4个值：row、row-reverse、column、column-reverse

row: （默认值）主轴为水平方向，起点在左端，从左至右排列；

row-reverse：主轴为水平方向，起点在右端，从右至左排列；

column：主轴为垂直方向，起点在上沿，从上至下排列；

column-reverse：主轴为垂直方向，起点在下沿，从下至上排列。

（2）flex-wrap： 控制子元素超出是否换行，有3个值：nowrap、wrap、wrap-reverse

nowrap：（默认值）不换行；若父元素装不下会缩小子元素的宽度，使子元素挤在一起

wrap：换行，第一行在上方；

wrap-reverse：换行，第一行在下方。

（3）justify-content：设置弹性盒子中子元素元素在主轴（横轴）方向上的对齐方式，5个值：flex-start、flex-end、center、space-around、space-between（以下图全部为两端对齐，我加了margin：0 10px才会有缝隙）

flex-start：（默认值），左对齐（沿着主轴开始位置至末尾位置对齐）；

flex-end：右对齐（沿着主轴末尾位置至开始位置对齐）；

center：居中对齐；

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；

space-between: 两端对齐，项目之间的间隔都相等。

（4）align-items：定义项目在交叉轴上如何对齐。有5个值flex-start、flex-end、center、baseline、stretch

注意：align-items适用于项目在一行中，不适用于换行。

flex-start：交叉轴的起点对齐；

flex-end：交叉轴的终点对齐；

center：交叉轴的中点对齐(可以理解为垂直居中)；

baseline：项目的第一行文字的基线对齐；

stretch：(默认值)，如果项目未设置高度或设为auto，将占满整个容器的高度。

持续更新中。。。。。。等实操后再来更新