flex布局

最新推荐文章于 2025-08-22 19:33:51 发布

原创最新推荐文章于 2025-08-22 19:33:51 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #布局 #前端 #ViewUI

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Flex布局的基础概念及属性设置，包括justify-content、align-items等关键属性的作用与使用方法，并解释了如何通过设置不同的属性值实现元素的排列与对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
浏览器私有属性： -moz -o -webkit -ms
display: flex inline-flex
flex-direction: row row-reverse column column-reverse
flex-wrap: nowrap wrap wrap-reverse
flex-flow: flex-direction和flex-wrap的结合，例如 flex-flow row nowrap
justify-content: 定义伸缩项目在主轴线的对齐方式 flex-start flex-end center space-between space-around
align-items: 定义伸缩项目在交叉轴的对齐方式 flex-start flex-end center baseline stretch
align-content: 定义伸缩项目换行后在交叉轴的对齐方式 stretch flex-start flex-end center space-between space-around

order: 排序，默认为0，数字越小越排前面。
flex-grow: 放大比例，默认为0，伸缩是按比例来算的，假设一共3个元素，第一个和第三个是1，第二个是2，那么第二个的伸缩比例是其他的两倍
flex-shrink: 收缩比例，其他同上
flex-basis: 伸缩项目的基准值，默认值auto，还有length
flex: 等同于 flex-grow flex-shrink flex-basis
align-self: 该元素在交叉轴的位置(如果交叉轴为垂直的话，只有不设置高度，才能看到streach效果,如果交叉轴为水平的话，只有不设置宽度，才能看到streach效果。总之宽度和高度优先于stretch)