Flex 布局

好多年前写的笔记移动到博客上

Flex 布局

概念

- flexible: box 弹性盒状布局
- 容器控制内部元素的布局定位
- css 引入的新布局模型
- 伸缩元素,自由填充,自适应

优势

- 可在不同方向排列元素
- 控制元素排序方向
- 控制元素的对齐方式
- 控制元素之间的等距
- 控制单个元素放大与缩放比例,占比，对齐方式

模型

- 容器内部放项目
- 主轴  从左向右 从上向下
- 交叉轴

flex容器的属性和布局

- flex container: flex 容器
- flex item :flex 项目 元素
- flex direction  设置元素排列方向
    - row  主轴  从左向右
    - row-reverse 主轴  从右向左 元素也会反向排列
    - column 主轴  从上向下
    - column-reverse 主轴  从下向上
- flex-wrap 使容器内的元素换行
    - nowrap  不换行
    - wrap 换行
    - wrap-reverse  反向换行
- justify-content 设置元素在主轴上的对齐方式
    - flex-start 左对齐 或者向上
    - flex-end 右对齐 或者向下
    - center 居中
    - space-between 两端对齐其余各元素之间等距切分剩余空隙
    - space-around  每个元素左右均分剩余空间
### 交叉轴
- align-items 设置元素在交叉轴上的对齐方式
    - flex-start 在交叉轴上起点位置 向上对齐 || 向左
    - flex-end 在交叉轴上结束位置  右对齐 或者向下
    - center 居中
    - baseline  保证元素中的文字在同一条线上
    - stretch  不设置高度项目拉伸
- align-content 设置轴线的对齐方式 (轴线当做元素)
- 只有一行(条) 这个效果无效 
- 当轴线超过一条的时候 把多条轴线 视为元素对待
    - flex-start 向左或许向上对齐
    - flex-end 向右或者向下对齐
    - center 进行居中对齐
    - stretch 交叉轴拉伸 不设置宽度生效
    - space-between 两端对齐 其余元素等分空余
    - space-around 元素均分剩余空间

flex容器内项目元素的属性

- order: 控制元素顺序 默认是 0
    - 数组越小越靠前
- flex-grow: 控制元素的放大比例 默认是 0
    - 根据设置的数据分割剩余空间
- flex-shrink 控制元素缩小比例当空间不足时 默认是 1
    - 设置为 0 就不压缩
- flex-basis 设置元素固定或者自动空间的占比
    - 设置固定宽度
- align-self 重写 align-items 父属性
    - flex-start 在交叉轴上起点位置 向上对齐 || 向左
    - flex-end 在交叉轴上结束位置  右对齐 或者向下
    - center 居中
    - baseline  保证元素中的文字在同一条线上
    - stretch  不设置高度项目拉伸
    - 默认auto 继承父级元素的 align-items