3分钟快速掌握Css弹性盒子（伸缩盒子）布局

弹性盒子（flex）

1.语法：display：flex（定义当前元素为弹性盒子）

①弹性盒子是一种布局方式

②特点：改变子元素在父元素的排列方式

采用flex布局的元素可以叫做flex的容器，他的子元素也会自动成为容器，也叫作flex项，通俗点来说在flex布局中，行级元素不用转换为块级元素，也可以拥有块级元素的属性。

2.弹性盒子的方向：
弹性盒子的轴方向与我们日常学过的坐标轴类似，只不过主轴方向与x轴相同而交叉轴方向与坐标轴中y轴相反，当然这只是系统给出的默认值，我们还可以通过代码来实现改变弹性盒子的主轴方向：

**语法：**flex-direction：主轴方向
例子1.flex-direction:row;水平正向（也是主轴方向的默认值）如图

2.flex-direction:row-reverse;(水平反向)

需要注意的时x轴方向改变不会影响交叉轴方向的改变

3.flex-direction：colum 垂直向下（交叉轴默认值）
4.flex-direction:colum-reverse 垂直反向（箭头指着上方）
定义内部弹性盒子是否换行
flex-wrap：nowrap 不进行换行（默认值)
内部元素呆在一行
flex-wrap：wrap 换行
内部元素自动换行

弹性盒子主轴的对齐方式
语法：justify-content：属性值；

①justify-content：flex-start 表示轴的开始方向对齐（默认值）
如图元素靠左对齐

②justify-content：flex-end 表示轴的结束方向对齐
元素靠右对齐

③justify-content：flex-center表示居中对齐

④justify-content：flex-between表示元素两端对齐

⑤justify：space-around；两个元素的间隔时元素与边框距离的2倍

元素在交叉轴的对齐方式
语法：align-items：属性值；
①align-items：flex-start；交叉轴开始方向（默认值）
②align-items：flex-end；交叉轴结束方向
③align-items：flex-center；居中对齐

这三种对齐方式与主轴雷同，大家可以手动去试一试，接下来还有一个补充的对齐方式：
align-items:baseline(基线对齐)元素基线对齐。

补充一个弹性盒子单元素居中的技巧：
在弹性盒子中分别设置主轴上的居中和交叉轴上的居中就可以实现
justify-content:center;
align-items:center;

好了，今天的分享就到这里明天继续。