粗说display布局

这周学了display的布局发个小小的总结,

一:容器属性:
flex-direction
决定主轴的方向(即项目的排列方向)

row(默认):主轴水平方向,起点在左端;
row-reverse:主轴水平方向,起点在右端;
column:主轴垂直方向,起点在上边沿;
column-reserve:主轴垂直方向,起点在下边沿。
flex-wrap
定义换行情况

nowrap(默认):不换行
wrap:换行,第一行在上方;
wrap-reverse:换行,第一行在下方。
flex-flow
以上两个属性的简写方式

justify-content
定义项目在主轴上的对齐方式

flex-start(默认值):左对齐;
flex-end:右对齐;
center:居中;
space-between:两端对齐,项目之间间隔相等;
space-around:每个项目两侧的间隔相等。
align-item
定义在交叉轴上的对齐方式

flex-start:起点对齐;
`flex-end:终点对齐;
center:中点对齐;
baseline:项目的第一行文字的基线对齐;
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content
定义多根轴线的对齐方式

flex-start:与交叉轴的起点对齐;
flex-end:与交叉轴的终点对齐;
center:与交叉轴的中点对齐;
space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布;
space-around:每根轴线两侧的间隔相等。

posted @ 2021-03-28 16:19  筱游人  阅读(190)  评论(0编辑  收藏  举报