一些关于flex布局的基础知识

天天都要进步

2025-09-26 62 阅读1分钟

FLEX

父元素上的常用属性

display: flex,flex-direction, justify-content,align-items, flex-wrap, flex-flow(flex-direction和flex-warp的简写)

子元素的常用属性

flex-grow, flex-shrink, flex-basis, align-self, order

说明：

flex:1 属性值是flex-grow: 1, flex-shrink: 1, flex-basis: 0%, 有剩余空间分配的时候，不考虑里面元素内容的宽度，等比例均分，比如要设置4个tab大小宽度一致的时候可以使用
flex: auto 属性值是flex-grow: 1, flex-shrink: 1, flex-basis: auto, 分配空间的时候会考虑里面内容的宽度，内容宽度占据一部分空间之后再平均分配剩余空间，一般在搜索框处使用，
flex: 0的区别

flex-grow的默认值是0，有剩余空间不进行拉伸
flex-shrink默认值是1，当空间比例不够的时候，进行收缩
如果元素的宽度和flex-basis同时设置，flex-basis的优先级高元素的width