一篇让你懂得flex布局的文章

flex布局

display：flex

1.flex-direction属性

row 默认（横向） row-reverse（横向倒序3-2-1）

column（纵向） column（纵向倒序） 修改flex-direction:colument 轴会进行交换，justify-content处理纵align-items处理横向

2.flex-warp

nowarp 默认（不换行，强制缩小）

warp 换行（超出进入下一行）

warp-reverse 底部展示 (超出进入上一行)

3.flex-flow属性

是flex-direction和flex-warp的缩写 ，默认属性为 row nowarp（横向且不换行）

4.justify-conetent属性

flex-start 默认值 (左对齐) center 居中 flex-end 有对齐

space-between 左右对齐，且中间距离相等

space-around 盒子之间的间距是盒子左右两侧到容器间距距离的两倍

space-evenly 盒子之间的间距等于和字左右带容器的间距

5.align-items属性

用于纵向排列（纵轴）

flex-start 最顶部 center 纵向居中 flex-end 最底部

baseline 第一个容器文字进行排列

6.aline-content属性

设置对齐方式（纵向）

flex-start 顶部对齐 center纵向居中对齐 flex-end顶部对齐

space-around 盒子之间的间距是盒子上下两侧到容器间距距离的两倍

space-evenly 盒子之间的间距等于和字上下带容器的间距

7.项目中属性

order ：默认为0.。用于排列顺序数值越小越靠前

flex-grow：默认值是0。数值决定空间占据，数值越大，占据越多，设置宽度，也会起作用

flex-shirk：默认值是1，决定盒子缩小是否跟着缩小，设置0代表盒子缩小并不会跟着缩小

flex-basis：用于设置盒子宽度，默认值为auto，以width为主，权重比width高，同时设置width，flex-basis生效。

flex：0 1 auto；分别代表flex-grow、flex-shirk、flex-basis。