flex布局

72 阅读1分钟

image.png

image.png

flex-direction: row(默认值):水平方向,起点左端 row-reverse:水平方向,起点右端 column:垂直方向,起点上沿 column-reverse:垂直方向,起点下沿(垂直方向倒叙)

justify-content:(横向的) flex-start(默认值):左对齐 flex-end:右对齐 center:居中 space-between:两端对齐(左右起点对齐) space-around:每个项目两侧的间隔相等(左右居中对齐)

align-items:(纵向的,父盒子设置高度能体现,起点为顶部,终点为底部) flex-start:起点对齐 flex-end:终点对齐 center:中心对齐 baseline:项目的第一行文字的基线对齐 stretch(默认值):未设置高度或者为auto,将沾满整个容器的高度