关于flex布局的总结

1.开启了flex布局的元素叫： flex container

2.里面的直接子元素叫:flex items（默认情况下，所有item都会在一行显示）

3.display属性由flex和inline-flex

 

flex相关属性：

1.应用在flex container上的css属性：

flex-flow：     flex-direction和flex-wrap的缩写属性

flex-direction: 决定主轴方向,默认是row（从左到右）,row-reverse(主轴从右到左)，column(从上到下)  column-reverse(从下到上)

flex-wrap：nowrap(不换行)  wrap(换行显示)

justify-content（主轴）:（决定flex item在main axis上的对齐方式2）flex-start(默认值与main start对齐)  flex-end(与main-end对齐)  center(居中对齐)   space-between(两端对齐，中间距离相等)  space-evenly（所有距离相等，包括两边） space-around（两边的距离是中间距离的一半）

align-items（交叉轴）： flex-start(刚开始位置（csross start）开始对齐) flex-end((cross-end)开始对齐)  center(中心点对齐)   baseline(基线对齐)

align-content：（交叉轴，与align-items类似，决定多行flex items）flex-start(交叉轴决定多行依次排) flex-end(从下往上)  center(居中) space-between(贴上下) space-evenly(平均) space-around()

2.应用在flex items上的css属性：

flex: 后三个的缩写属性，

flex-grow： 决定flex-item如何扩展

flex-basis： 设置flex items在主轴上的base size

flex-shrink：决定flex items如何收缩

order: (值小排在前面，用的较少)

align-self： （决定单个元素，可以覆盖flex container的align-items属性 用的较少）