flex布局

126 阅读1分钟

container的样式

***1.改变items流动方向(主轴)

image.png

***2.改变折行

image.png

***3.主轴对齐方式(默认主轴是横轴,除非改变了flex-direction方向)

image.png

image.png

***4.次轴对齐(默认次轴是纵轴)

image.png

image.png

5.多行内容

image.png

image.png

item样式

1.item上面加order(控制顺序)

image.png

2.item上面加flex-grow(控制如何长胖)

image.png

3.flex-shrink控制如何变瘦(0防止变瘦,默认是1)

4.flex-basis控制基准宽度(默认auto)

5.align-self定制align-items

image.png