Flex 布局(二)

Flex 属性

Flex 容器属性

容器属性 描述
flex-direction 决定主轴的方向(即项目的排列方向)
flex-warp 定义是否新行显示,以及新行的排列方向
flex-flow flex-directionflex-wrap 的简写方式
justify-content 定义了项目在主轴上的对齐方式
align-items 定义弹性项目在侧轴上的对齐方式
align-content 定义多行在侧轴的对齐方式,当只有一行时,不起作用

Flex 项目属性

项目属性 描述
order 数字,定义弹性项目的显示顺序,数字越小越靠前
flex-grow 数字,定义弹性项目的放大比例,默认 0
flex-shrink 数字,定义弹性项目的缩小比例,默认 1,值 0 表示不缩小
flex-basis 数字,定义弹性项目的默认尺寸
flex flex-grow flex-shrink flex-basis` 的缩写,默认值为 0 1 auto
align-self 定义此弹性项目本身的对齐方式,会覆盖弹性容器align-items 定义的对齐方
谢谢打赏
0%