弹性盒子：等宽【等比例】、移动端

一 flex的常用的

　　 flex：  1 flex-grow 放大       1 flex-shrink 缩小    1200px flex-basis 宽度
flex-flow：  row | flex -direction       nowrap | flex-wrap（换行方式）

 

遇到过的问题：
 1. flex嵌套absolute等，flex失效     >>解决：flex布局里面的外层里嵌套个div

 2.flex嵌套flex  flex外层的样式失效  >>解决：同上，最里层的flex嵌套一层

3 盒子模型和display：none,display:block一起使用存在的问题

使用盒子模型display：flex后，子元素用display：none，display：block会出现失效。>>解决办法：在子元素中外面加个div标签

flex遇到过的最外层出现横向滚动条：https://www.freesion.com/article/1164891778/

 二 flex的基础知识

1 定义

弹性盒子模型，方向 flex -direction 、 justify-content 、flex-wrap（换行方式）

align-item 与 justify-content【内容】[文本是text-align 与vertical-align]

之前混淆的：justify-content水平 align-item垂直

 

?

1 2 3 4 5 6 7

justify-content:justify-content控制水平方向的居中   flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

 

　　

 

2 flex:1 实现子元素的自适应

flex： 1         最小化尺 ， 适合等比例列表
flex：auto     根据大小最大化尺寸， 适合充分利用剩余空间，比如头部导航文字

flex: 0 1 auto 默认,不放大会缩小
flex:1 0 auto 放大 不缩小

 

 

也可以等比例的宽度

?

1 2	//父元素display：flex 不同的子元素：  flex：1  flex：3  flex：1

3.用flex实现基本的头尾布局

?

1 2 3 4 5 6 7 8 9

.content{    display：flex；flex-direction：row;    height:100vh; } .f- head{} .f-body{flex:auto;或 felx：1； } .f-footer{   flex-shrink:0; }

4. 优点：

优先：适应不同的分辨率

缺点：浏览器兼容性比较差，只能兼容到ie9及以上