其他分享
首页 > 其他分享> > Flex布局

Flex布局

作者:互联网

传统布局方式基于浮动和定位方式对网页进行布局,但是布局灵活性太差

Flex布局又叫弹性布局  大大提高盒子模型布局的灵活性

基本介绍

采用Flex布局的元素 又称Flex Container(容器)

容器由主轴(main axis)和交叉轴(cross axis)决定了自身大小  起始方向 从左到右  从上到下

容器属性

flex-direction(主轴方向):   row   row-reverse   主轴水平      column   column-reverse   主轴垂直

flex-wrap(轴线是否换行): nowrap   wrap   wrap-reverse

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(多根轴线的对齐方式)

更多属性 请查阅文档

标签:Flex,reverse,主轴,布局,flex,wrap
来源: https://www.cnblogs.com/aksdk/p/16579766.html