flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思

常见的父容器属性:

1. 设置主轴方向:flex - direction: row | row-reverse | column | column-reverse;

默认是以x轴(row) 为主轴 从左往右开始排列
row-reverse 以x轴为主轴 从右往左开始排列
column 以y轴为主轴 从上往下开始排列
column-reverse 以y轴为主轴 从下往上排列

2.设置主轴上的子元素排列方式 justify-content :first-start | first-end | center | space-around | space-between
first-star:如果主轴是x轴 则从左往右帖着排序 主轴y轴侧是从上到下
first-end:如果主轴是x轴 则从右往左贴着排序 主轴y轴侧是从下到上
center :元素主轴中间对齐
space-around :每个元素均分剩下的空间
space-between:两边贴边 再均分剩下的空间
3.设置子元素是否换行

flex子元素默认是不换行的
flex-warp:warp | nowarp
warp:换行
nowarp:不换行

4.设置侧轴的子元素排列方式(适合单行情况)

align-items: flex-start | flex-end | center | stretch
flex-start: 默认值 从上到下
flex-end : 从下到上
center: 挤在一起居中 (常用
stretch:拉伸(少用

5.设置侧轴元素的对齐方式(适合多行情况)

align-content: flex-start | flex-end | center | space-around | space-between
flex-start :默认从上到下
flex-end:从下到上
center:居中对齐
space-around:平均分配剩下的空间
space-between:两边先贴边 在平均分配剩下的空间

6.flex-flow 复合属性

flex-flow:row warp 这样写表示主轴为x轴 并且换行,flex-flow是这种主轴和换行的简写

子元素的属性

1.flex:(number) 设置子元素所占的空间
例如:一个div里面有三个span ,span都没有设置宽高 那么给父容器设置display:flex ,给子元素设置flex:1 那么子元素就会均分父元素的宽高 分为三等分
2. algin-seft : flex-start | flex-end | center 让某一个子元素单独设置设置样式 例如:div:nth-child(3) { align-seft:flex-end}
3. order: +numeber 默认是0 数值越小越靠前 可以设置子元素的位置顺序

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐