弹性盒子

182 阅读1分钟

flex弹性盒子

display:flex把盒子设置成弹性盒子

flex-direction:row排列顺序

rowx轴默认值从左到右 row-reverse 从右到左

column y轴默认从上到下 column 从下到上

flex-wrap 资源在父盒子中是否换行

nowrap 默认不换行和列 wrap 换行列 wrap-reverse 换行列但是以想法的顺序简写

flex-flow:排序 换行:

Justify-content 用来存在剩余看空间时,设置为间距的方式 Flex-start 从左到右挨着 flex-end 从右到左挨着 center 中心显示 Space-between 平均分布 两边不留间隙 Space-around 平均分布 两边留间隙

align-items:

flex交叉轴的对齐方式 把每一个子元素当成一个独立的个体处理 Flex-start 交叉轴顶部flex-end 交叉轴底部 center 中间

align-content把多行的内容当成一个整体处理

Flex-start :

容器开头flex-end 容器结尾 center容器中心 Space-between

间有空白 Space-around 两端留有空白