flex布局

认识flex布局

flex布局（Flexible 布局，弹性布局）

---

开启了flex布局的元素叫flex container

flex container 里面的直接子元素叫 flex items

.box{
    /* 
    开启flex布局 
    display:flex;           flex container为块级元素
    display:inline-flex;    flex container为行级元素
    */
}

默认横坐标为 主轴 main axis

默认纵坐标为 交叉轴 cross axis

应用在 flex container 上的 CSS 属性	应用在 flex items上的 CSS 属性
flex-flow	flex
flex-direction	flex-grow
flex-wrap	flex-basis
justify-content	flex-shrink
align-items	order
align-content	align-self

---

应用在 flex container 上的 CSS 属性

• flex-direction

flex items 默认都是沿着main axis（主轴）从main start开始往main end方向排布

flex-direction 决定了 main axis 的方向，有四个取值

1. row(默认)：主轴从左到右
2. row-reverse：主轴从右到左
3. column：改变主轴的方向：从上到下
4. column-reverse：改变主轴的方向：从下到上

• justify-content

justify-content 决定了 flex items 在 main axis 上的对齐方式

1. flex-start(默认)：与 main start 对齐
2. flex-end：与 main end 对齐
3. center：居中对齐
4. space-between：紧贴两边分开对齐
5. space-evenly：将空格平均分为 n + 1 份 对齐
6. space-around：将所有的空格平分在flex-items两边 对齐

• align-items

align-items 决定了 flex items 在 cross axis(交叉轴，默认y轴) 上的对齐方式

1. normal(默认)：在弹性布局中，效果和 stretch 一样
2. stretch：当 flex items 在 cross axis 方向的 size 为 auto时，会自动拉伸至填充flex container
3. flex-start：与 cross start 对齐
4. flex-end：与 cross end 对齐
5. center：居中对齐
6. baseline：与基准线对齐

• flex-wrap

flex-wrap 决定了 flex container 是单行还是多行

1. nowrap(默认)：单行
2. wrap：多行
3. wrap-reverse：多行（对比wrap，cross start 与 cross end 相反）

• align-content

align-content 决定了多行 flex items 在cross axis 上的对齐方式，用法与 justify-content 类似

1. flex-start(默认)：与 cross start 对齐
2. flex-end：与 cross end 对齐
3. center：居中对齐
4. space-between：紧贴两边分开对齐
5. space-evenly：将空格平均分为 n + 1 份 对齐
6. space-around：将所有的空格平分在flex-items两边 对齐

---

---

---

应用在 flex items 上的 CSS 属性

• order

order 决定了 flex items 的排布顺序

1. 默认值是 0
2. 可以设置任意整数（正整数、负整数、0），值越小就越排在前面

• align-self

flex items 可以通过 align-self 覆盖 flex container 设置的align-items

1. auto(默认)：遵从flex container 的 align-items 的设置
2. stretch、flex-start、flex-end、center、baseline，效果和 align-itens 一致

• flex-grow

flex-grow 决定了 flex items 如何扩展

1. 可以设置任意非负数字，默认为 0
2. 当 flex container 在 main axis 方向上有剩余size时，flex-grow属性才会有效
3. items 设置的值总和大于 1，会撑满父元素，每个item伸展 size * 值 / 总和
4. items 设置的值总和小于 1，不会撑满父元素，每个item伸展 size * 值
5. 最大不超过 size

• flex-shrink

flex-shrink 决定了flex items 如何收缩

1. 可以设置任意非负数字，默认为 1
2. 当 flex items在 main axis 方向上排列不下，flex-shrink属性才会有效
3. items 设置的值总和大于 1，会撑满父元素，每个item收缩 size * 值 / 总和
4. items 设置的值总和小于 1，不会撑满父元素，每个item收缩 size * 值
5. 最小不小于size

• flex-basis

flex-basis 用来设置 flex items 在main axis 方向上的 base size

1. auto(默认) / px
2. 决定 flex items 最终 base size 的因素，size > flex-basis > width/height > 内容本身的 size

• flex

flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定1个、2个或3个值

语法

1. 一个无单位数字：当做flex-grow
2. 一个有效 px 值：当做flex-basis
3. 关键字 none， auto 或 inital

END