flex布局

flex布局

1.如果是PC端页面布局，用传统布局

如果是移动端或者不考虑兼容问题的PC端页面布局，就用flex弹性布局

2.flex布局不区分行内元素和块元素

如果一个大div里面装了三个span 小盒子，想要她们在一行显示的话，不需要浮动

给大的div加display：flex；

还想让它们 左边一个 中间一个，右边一个（随着浏览器的缩放自觉调整间距）

justify-content：space-around；

如果再想让他们把大盒子分成三等份：

小盒子span 不需要给宽度了，给小盒子加 flex：1；

3.为父元素设置了flex布局之后，float、clear、vertical-align属性将失效

Flex布局已经默认把盒子放到一行来显示了

4.常见的父亲属性

（1）Flex-direction：区分主轴（x轴方向，水平向右）和侧轴（y，垂直向下），子元素根据主轴来排列

（2）

Flex-end要跟reserve区分开，reserve是连内容都倒置，但是flex-end不倒置内容和顺序，只是整体靠右了；

Center是所有小盒子span都往中间靠，以前这样写还得加个父盒子，让父盒子magin 0 auto，现在直接加这个就行

Space-around是大盒子的剩余空间被每个小盒子平分为margin-left和right

（3）flex-wrap：如果你设置的好几个小盒子，而且他的宽度已经超过大盒子一行的宽度，他默认会不换行排列，把你的小盒子压缩塞进去

（4）如果想让里面所有的小盒子即水平又垂直居中（也就是处于大盒子的正中央）咋整？

Stretch（了解），用着的时候不要给子盒子高度，然后他就拉子盒子的高

注意：虽然主和侧都是水平居中，但是你设置哪个是主轴也不一样，设置x是主轴他仨就横着排水平居中，否则就是竖着排水平居中；

而且，你发现这个是单行的，他要不就贴上面要不就贴下面，或者是居中啥的，不能实现有两行盒子让第一行贴上面，第二行贴下面

（5）用于多行的情况：align-content

Flex-start加上之后不是没有变化，以前两行盒子排列之间会有很大的距离，加上之后就没有了

（6）flex-flow

flex-direction和flex-wrap的复合属性

flex-flow：column，wrap；

5.左侧固定，右侧也固定，中间随着浏览器宽度变化而变化咋整呢，给第二个盒子加上 flex：1；默认是0

意思是中间这块分成一份给2号盒子

不给宽度的话也就是不固定，这样那几个盒子就等分（注意：是从剩下的空间里分，所以三个盒子每个都写flex：1，那也就是三个人各分3分之1）