传统的布局方法,都是使用盒子模型,使用浮动,定位,块状元素的使用,很不方便,很容易就会出现高度塌陷的问题,比如说垂直居中就很难实现。
我们先写框架
这是目前的效果
flex容器(父元素)
1 flex-direction--子项目的排列方式:
row初始值:
row-reverse:
column:(剩下的值都在垂直下方)
column-reverse值与column正相反
2 fles-wrap(子项目多行)
nowrap(初始值,给再多盒子也会在一行显示)
wrap(多余的盒子会转移下一行)
wrap-reverse(从下到上)
3 justify-content水平对齐
flex-start默认值左对齐
lex-end(右对齐)
center(中间对齐)
space-between
space-around
4 align-items … (垂直对齐)
stretch(初期値)
flex-start(会在最上方)
flex-end(最下方)
center(中间)
baseline(以文字的底部对齐)
5 align-content多行对齐(需要加flex-wrap:wrap )
stretch(初期値)
、
flex-start
flex-end
center
space-between
space-around