flex 布局(工作学习总结一)

flex使用

容器内应用：display: flex;

行内元素应用： display: inline-flex;

使用后：float、clear、vertical-align 元素失效

常用属性：（需要在display:flex|inline-flex 使用之后）

• flex-direction: row | row-reverse | column | column-reverse;

row: 默认，横向左向右

row-reverse: 横向右向左

column: 纵向上向下

column-reverse: 纵向下向上

• flex-wrap: nowrap | wrap | warp-reverse;

nowrap：默认，不换行，无视已经设定宽度，一行里面挤吧挤吧

wrap:换行，下一行在上一行上面，倒着添加

wrap-reverse:从上往下添加，下一行在上一行下面

• justify-content: flex-start | flex-end | center |space-between | space-around

flex-start:横向，左对齐

flex-end:横向，右对齐

center:横向，中间居中

space-between: 横向，两端对齐，贴边，每个项目间隔相同

space-around:横向，也是平均分，但两端有间距，距离是中间间距的二分之一

• align-items:flex-start | flex-end | center | baseline | strech 、

flex-start:纵向，顶头来

flex-end:纵向，尾部对齐

center: 纵向，居中

baseline: 字体下方对齐

stretch：默认值，沾满整个高度

• align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;

flex-start：顶部对齐

flex-end：底部对齐

center：中间对齐

space-between:平均分布

space-around:轴线间隔比边框大一倍

stretch:充满交叉轴

• flex-shrink: 默认是1，空间不足时，1的不缩小，0的空间缩小

• align-self：auto | flexstart | flex-end | center | baseline | stretch;

自身可以与别的项目有不同的对齐方式

• order排序，数字越大越靠后
• flex-grow 非零情况占满剩下空间根据设置数字放大盒子范围 

1. 水平居中方法总结：

• text-align:center;对父级（block）

• margin:0 auto;对当前，上下间距不慌，在后面设置就行

• display:flex; justify-content:center;比较方便，但是上下距离当然没法测量了

• margin-left...绝对定位

• grid属性也可以实现，但遇到过部分系统浏览器不支持属性，自动被注释的情况

1. 垂直居中方法总结：

• display:flex;align-items:center;一直用的还好

• 偶尔设置行高

• vertical-align:middle图标行内居中的时候使用

参考网址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html