flex 相关属性

Posted 2023-05-03

参考技术A flex 这个 CSS 属性已经标准化很久了。
目前市面上绝大多数浏览器也已经支持。
在实际应用中也经常会用到。
但是涉及到部分属性的时候偶尔还是会不记得。因此在这里记录一下。

内部元素排列方向，取值有
row：横向； row-reverse：横向逆向； column：纵向； column-reverse：纵向逆向；

nowrap： 强制所有元素同行
wrap：如果排布不下，则自动向下换行
wrap-reverse： 如果排布不下，则自动向上换行

flex-direction 和 flex-wrap 组合属性，默认为 row nowrap

元素在主轴上的对其方式，取值有
flex-start：对齐到主轴首部
flex-end： 对其到主轴尾部
center：居中对齐
space-between：两端对齐。剩余空白部分平均分布在项目间，首尾没有空白
space-around：两端对齐。剩余空白部分平均分布在项目间，首尾有空白

元素在副轴上的对齐方式，取值有
flex-start：对齐到副轴首部
flex-end：对其到副轴尾部
center：对齐到副轴中间
baseline： 以文字基线对齐
stretch：填满整个副轴

元素如果在主轴上换行，则多行元素在副轴上如何对齐，取值有
flex-start：对齐到副轴首部
flex-end：对其到副轴尾部
center：居中对齐
space-between：两端对齐。剩余空白部分平均分布在项目间，首尾没有空白
space-around：两端对齐。剩余空白部分平均分布在项目间，首尾有空白
stretch：填满整个副轴

排布顺序，数字越小越靠近主轴首部，默认为0

项目方法比例，默认为0

项目缩小比例，默认为1

项目默认占据的空间，默认为auto

组合属性， flex-frow flex-shrink flex-basis，默认为 0 1 auto。

元素在副轴上的对齐方式，取值与align-item相同

css flex相关，长期更新

这里暂时不是入门教学，是flex知识收集

兼容性
display: flex;
display: -webkit-flex;

其余新属性前面加-webkit-
　　

Flex属性(the first value is the default one of the property)
　　direction:ltr/rtl //the flex line

　　flex-direction:flex-start/flex-end/center/space-between/space-around //the main axis

　　align-items:flex-start/flex-end/center/baseline/stretch //the cross axis

　　flex-wrap:nowrap/wrap/wrap-reverse

　　align-content:stretch/flex-start/flex-end/center/space-between/space-around

　　flex-flow: [flex-direction] [flex-wrap]

Flex Item属性
　　order:0

　　margin:auto

　　align-self:stretch/flex-start/flex-end/center/baseline //overrides Flex Container‘s align-items

　　flex: 0 1 auto/[Number]/initial/auto/none //不要用，除非把flex-basis部分设置auto，否则在ie里，box-sizing强制变content box
　　flex: [flex-grow] [flex-shrink] [flex-basis]

　　flex-basis:auto/[width]

　　flex-grow:0

　　flex-shrink:1