首页 > 其他 > 详细

粗说display布局

时间:2021-03-28 17:27:44      阅读:13      评论:0      收藏:0      [点我收藏+]

这周学了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:每根轴线两侧的间隔相等。

粗说display布局

原文:https://www.cnblogs.com/zhangtang/p/14588997.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!