html+css学习笔记

flex布局

flex-direction

确定主轴方向，作用于父元素

• row：默认值，从左到右

• row-reverse：从右到左

• column：从上到下

• column-reverse：从下到上

justify-content

决定子元素在主轴上的对齐方式

• flex-start: 从头开始

• flex-end：从尾部开始

• center：居中

• space-around：平分剩余空间

• space-between：两边留有空隙，均分剩下的

flex-wrap

• nowrap：不换行

• wrap：换行

align-item

侧轴上的排列方式

• flex-start：从上往下

• flex-end：从下往上

• center：居中

• strech：子盒子侧轴上的大小与父盒子保持一致

align-content（多行）

以行为单位的布局

flex-start：从上往下

flex-end：从下往上

center：居中

space-around：两侧留有空余，中间的间隙平分

space-between：两侧无空余，平分

stretch：子元素不能设置侧轴上的大小，平分父元素大小

flex-flow

flex-direction与flex-wrap的结合

order

作用于子元素，order越大，在排序上越靠前