前端女娲补天 CSS（三）有哪些flex属性

LiXenon

已于 2022-05-28 22:49:02 修改

阅读量68

点赞数

分类专栏：前端文章标签： css 前端

于 2022-05-28 22:47:26 首次发布

本文链接：https://blog.csdn.net/lixenon/article/details/125024655

版权

21 篇文章 1 订阅

订阅专栏

有哪些flex属性

flex-direction：flex排列方向与顺序，值有row（横向默认）| row-reverse | column（纵向） | column-reverse
flex-wrap: 项目是否换行，值有nowrap（不换行默认）| wrap | wrap-reverse（第一排紧贴底部）
flex-flow: flex-direction和flex-wrap的集合，默认值row nowrap
justify-content（横轴排列）: flex-start（左对齐） | flex-end（右对齐） | center | space-between（左右两侧项目都紧贴容器） | space-around（项目之间间距为左右两侧项目到容器间距的2倍） | space-evenly（项目之间间距与项目与容器间距相等）
align-items（纵轴排列）：flex-start（上对齐） | flex-end（下对齐） | center | baseline（基于文字基线） | stretch（无高度则拉伸默认）
align-content（多行纵轴排列）：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)

order：排列顺序
flex-grow：有剩余空间时是否放大，默认0，多个元素有值时按比例分配
flex-shrink：空间不足时是否缩小（即使有固定宽度），默认1，如果为0不会缩小
flex-basis：设置元素固定宽度，优先级高于width，低于flex-shrink flex：默认0 1 auto 前三者的集合
align-self（单个元素设置纵轴排列）：auto(继承父元素align items 默认) | flex-start | flex-end | center | baseline | stretch

关注