flex布局

Posted 2022-03-01 做个机灵鬼

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 数值越小越靠前 可以设置子元素的位置顺序