flex布局

最新推荐文章于 2024-11-01 19:34:36 发布

撸码之鱼

最新推荐文章于 2024-11-01 19:34:36 发布

阅读量62

点赞数

文章标签： flex css3

本文链接：https://blog.csdn.net/weixin_41661396/article/details/115469618

版权

本文详细解读了Flex布局中的flex-direction, flex-wrap, flex-flow等容器属性，以及justify-content, align-items, align-content等元素对齐方式，同时介绍了order, flex-grow, flex-shrink等元素布局控制关键属性。

摘要由CSDN通过智能技术生成

设置在容器上的属性（6个）

flex-direction: row || row-reverse || column || column-reverse // 说明主轴及其排列顺序
flex-wrap: nowrap || wrap || wrap-reverse // 主轴方向换行方式
flex-flow: <flex-direction> <flex-wrap> // 上面两个属性的合并
justify-content: flex-start || flex-end || center || space-between || space-round // 主轴方向对齐方式
align-item: flex-start || flex-end || center || stretch || baseline // 副轴方向对齐方式
align-content: flex-start || flex-end || center || space-between || space-round || stretch // 多条副轴时的对齐方式

设置在容器内元素的属性（6个）

order: <integer> // 元素排列顺序，值越小越靠前，默认0
flex-grow: <number> // 设置元素的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink: <number> // 设置元素的放大比例，默认为1，即如果空间不足，该元素将缩小。
flex-basis: <pixe> // 单独设置元素大小，默认auto
flex: <flex-grow> <flex-shrink> <flex-baseis> || none || auto // 前三个属性的合并，默认为auto(1 1 auto)，none值为0 0 auto
align-self: flex-start || flex-end || center || stretch || baseline // 单独设置单个元素的对齐方式，覆盖align-item属性

详见：阮一峰：Flex 布局教程