FLEX弹性布局认识

flex布局

容器和项目(父子级)

容器

display设置为flex，则当前标签为容器，子元素为项目
功能:所有子元素在一行显示

项目

flex-grow放大 (默认值为0)

计算方式

• 获取项目的剩余空间
• 获取所有项目设置了flex-grow的份数之和
• 剩余空间 / flex-grow的份数之和=每一份的值
• 按照份数，分给相应的项目

flex-shrink缩小(默认值是0)

计算方式
不想缩小取值为0

• 获取项目的超出尺寸
• 获取所有项目设置了flex-shrink的份数之和
• 超出尺寸 / flex-shrink的份数之和=每一份的值
• 按照份数，分给相应的项目

order属性 (默认值为0)

• 进行项目的排序，取值越大越靠后，取值越小越靠前
• 适用场景:html靠前，页面展示靠后。

主轴 (x轴)和交叉轴 (y轴)

改变主轴方向felx-direction

取值

• row
  主轴在水平方向，项目从左到右依次摆放(默认值)
• row-reverse
  主轴在水平方向，项目从右到左依次摆放
• column
  主轴在交叉轴方向， 项目从上到下依次摆放
• column-reverse
  主轴在交叉轴方向，项目从下到上依次摆放

felx-warp 设置项目是否换行

取值

• nowarp
  不换行，即所有项目在一行显示(默认值)
• warp
  换行条件:
  主轴是水平方向:所有项目宽度之和大于容器的宽度换行
  主轴是交叉轴方向:所有项目高度之和大于容器的高度换行
• wrap-reverse
  倒序换行

- flex-flow:

• 换行简写 flex-flow:nowrap wrap
  交叉轴开始并换行

主轴上的对齐方式 justify-content

主轴是水平方向 row
注:所有项目宽度之和小于容器的宽度

取值

• flex-start: 左对齐(默认值)
• flex-end: 右对齐
• center : 居中
• space-between :二端对齐
• space-around :分散对齐
• space-evenly:平均分配

主轴是交叉轴方向 column
注:所有项目高度之和小于容器的高度

• flex-start: 左对齐(默认值)

• flex-end: 右对齐

• center : 居中

• space-between:二端对齐

• space-around :分散对齐

• space-evenly:平均分配

分散对齐计算方式:

1.获取剩余空间(容器宽-所有项目之和宽=剩余空间)
2.剩余空间 / 项目个数 =结果1
3.结果1 / 2=结果2
4.把结果2平均分配给每个项目的左右

主轴是交叉轴方向 column-reverse
注:所有项目宽度之和小于容器的宽度

• flex-start: 左对齐(默认值)
• flex-end: 右对齐
• center : 居中
• space-between : 二端对齐
• space-around :分散对齐
• space-evenly:平均分配

交叉轴对齐方式align-items:

交叉轴是垂直方向(默认)align-items

取值

• flex-start:顶部对齐
• flex-end:低部对齐
• center : 居中

交叉轴是水平方向 align-items

取值

• baseline:基线对齐
• flex-start : 交叉轴上对齐
• flex-end :交叉轴下对齐
• center :交叉轴居中
• stretch : (默认值)当项目没给高就是当前容器的高

align-self 设置的是子元素

元素继承了他父元素的align-item值，如果没有父元素则为stretch

取值

• auto 默认值，

• stretch 元素被拉伸以适应容器

• center 居中

• flex-start 元素位于容器的开头

• flex-end 元素位于容器的结尾

• baseline 元素位于容器的基准线上

多根轴线的对齐方式align-content

取值

• flex-start:多行顶部对齐
• flex-end:多行底部部对齐
• center : 多行居中对齐

什么是基线

在英文中才存在基限,中文都是占满4根线

• topline:顶线
• middle line :中线
• baseline :基线
• bottow line 底线
  注:字体设置大小后,不与实际设置的内容大小相同，是因为基线到顶线和底线有一点距离，所有可以设置 line:hight取消基线到顶线和底线多出来的高

拓展

flex-wrap:nowrap和 align-items(一组使用)因只有一根轴线
flex-wrap:wrap和align-content(一组使用)因需多根轴线