flex 常用属性

兼容容器!!!!!

justify-content: 项目在主轴上的排列方式

flex-start(默认值) 居左 | flex-end 居右 | center居中 | space-between两端对齐 

 space-around 每个项目两侧的间隔相等 | space-evenly分散对齐(每个间隔都相等)

flex-direction: 主轴方向

row(默认值) 水平从左至右  |  row-reverse 水平从右到左  |   column  垂直从上到下  |  column-rever  垂直从下到上

flex-wrap:  是否允许项目换行

nowrap(默认值) 不允许换行 |   wrap 可以换行,第一行在上方 |  wrap-reverse 可以换行,第一行在下方

align-items: 项目在交叉轴上的对齐方式

 flex-start 项目在交叉轴起点   |  flex-end 项目在交叉轴终点  |  center 交叉轴居中  | baseline 第一行文字的基线对齐  |  stretch(默认值) 项目没有设置高度,项目会沾满交叉轴

align-content: 只在存在多根主轴的时候有效,定义的是主轴在交叉轴上的分布方式

flex-start 交叉轴起点 | flex-end 交叉轴终点 | center 交叉轴的中间 | space-between 交叉轴两端 | space-around | 每根主轴两侧的间隔相等,分布 | space-evenly 分散对齐 | stretch 沾满交叉轴 默认值


兼容项目!!!


order: 项目的排列顺序,默认值都为0,值越小,越靠前


flex-grow: 是否允许项目放大

,默认值是0代表不允许放大;可取值是数值,如果取值为1或者大于1的数值,代表可以放大


flex-shrink: 是否允许项目缩小

默认值是1代表允许缩小


flex-basis: 项目占主轴空间

默认值是auto


flex:  flex-grow flex-shrink flex-basis的简写


,默认值是0 1 auto 不允许放大,可以缩小,主轴空间自适应

有两个快捷值: auto(1 1 auto)和none(0 0 auto) ,也可以单独设置三个值

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容