flex布局

两个概念：

• 开启了flex布局的元素叫做flex container

• flex container里面的直接子元素叫做flex items

设置display属性开启flex布局：

flex: flex container以块级元素（block-level）形式存在

inline-flex: flex container以行内级元素（inline-block）形式存在

flex布局模型

main axis 主轴 cross axis 交叉轴

flex-container属性

flex-direction 决定主轴方向

justify-content 决定flex items在main axis上的对齐方式

align-items 决定flex items在cross axis上的对齐方式

flex-wrap 决定flex-container是单行还是多行

align-content 决定多行flex items在cross axis上的对齐方式

flex-items属性

order 控制多个flex items的排布顺序

 

 

flex-grow 决定flex items如何扩展

flex-shrink 决定flex items如何收缩

flex-basis 设置元素在主轴方向上的具体大小

flex 简写属性（了解）