1.基本概念
注意:设为 Flex 布局以后,子元素的float,clear和vertical-align属性将失效
2.容器的属性
//决定主轴的方向;水平向右,水平向左,垂直向下,垂直向上
flex-direction:row | row-reverse | column | column-reverse
//决定如何换行;不换行,第一行在上方,第一行在下方
flex-wrap:nowrap | wrap | wrap-reverse;
//flex-direction属性和flex-wrap属性的简写形式
flex-flow:flex-direction flex-wrap
//决定对齐方式;左对齐,右对齐,居中,两端对齐,每个项目两侧的间隔相等
justify-content:flex-start | flex-end | center | space-between | space-around;
//决定在交叉轴上的对齐方式;起点对齐,终点对齐,中点对齐,第一行文字的基线对齐,项目未设置高度或设为auto将占满整个容器的高度
align-items:flex-start | flex-end | center | baseline | stretch;
//决定多根轴线的对齐方式;起点对齐,终点对齐,中点对齐,轴线之间的间隔平均分布,每根轴线两侧的间隔都相等,轴线占满整个交叉轴
align-content:flex-start | flex-end | center | space-between | space-around | stretch;
3.项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.垂直居中实现
display:flex;
justify-content:center;
align-items:center;
网友评论