伸缩布局(弹性布局)

• display:flex
• 给谁添加了display:flex,谁就是伸缩容器
• 伸缩容器中的盒子,就被称为伸缩项

主轴方向

1.只要将一个元素变为了伸缩的容器, 那么里面的伸缩项自动就会水平排版
2.默认会按照主轴从左向右的方向排版
flex-direction:属性就是专门用于设置主轴的方向的,
默认取值是row(从左至右)
row-reverse(从右至左)
flex-direction: column(主轴修改为垂直方向)

• 注意点:
• 只要主轴变为了垂直方向, 那么侧轴就会自动变为水平方向
• 主轴和侧轴永远都是十字交叉的

伸缩项主轴的对齐方式

justify-content: flex-start;设置伸缩容器中的伸缩项, 和伸缩容器主轴的起点对齐

justify-content: flex-end设置伸缩容器中的伸缩项, 和伸缩容器主轴的终点对齐

justify-content: center;设置伸缩容器中的伸缩项居中

justify-content: space-between; 两端对齐, 第一个伸缩项会和主轴的起点对齐,最后一个伸缩项会和主轴的终点对齐,其它项目平分多余的间隙

justify-content: space-around; 环绕对齐, 给所有伸缩项的两遍都添加间隙

伸缩项侧轴的对齐方式

align-items: flex-start 侧轴的默认对齐方式: 和侧轴的起点对齐

align-items: flex-end和侧轴的终点对齐

align-items: center 和侧轴的中点对齐

align-items: baseline按照所有伸缩项内容的基线对齐

align-items: stretch拉伸对齐

主轴侧轴交叉问题

无论主轴变为从上至下, 还是从下至上

侧轴永远都会和主轴十字交叉, 但是侧轴的起点永远都在左边

伸缩布局的换行显示

伸缩容器宽度小于所有伸缩项宽度时, 系统会自动等比缩放伸缩项
如果不想让系统自动等比缩放伸缩项, 那么可以设置一个属性
flex-wrap: wrap;

• 默认值:flex-wrap: nowrap;
  flex-wrap: wrap-reverse 将最前面一行显示到最后一行, 其它行依次往上显示
• 注意点: 设置行的对齐方式, 参考点就是侧轴

侧轴换行的行对齐方式

align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content:strech(默认值)
属性的含义和justify-content一样

伸缩项排序

• 在伸缩布局中, 可以利用order属性来给伸缩项进行排序
• 默认情况下order的取值是0, 那么order会按照取值的大小来排序
• 值小的排在前面, 值大的排在后面

伸缩项的放大和缩小比例

• 伸缩项放大比例

• 如果想让伸缩项按照一定的比例分配伸缩容器的宽度, 那么就可以通过flex-grow属性来设置

• flex-grow: 1; 那么就代表着所有伸缩项占用一份宽度

• 计算公式:
  首先:会计算多余的宽度: 伸缩容器的宽度 - 所有伸缩项的宽度 = 多余宽度
  其次:会计算每份分配多大的宽度: 多余宽度 / flex-grow 值的总和 * 属性对应的值

• 伸缩项缩小比例

• 如果伸缩容器的宽度小于伸缩项的宽度, 我们可以通过flex-shrink来设置每个伸缩项的缩小比例

伸缩项宽度设置

• 可以通过给伸缩项设置flex-basis设置宽度
• 注意点:
  1.在伸缩布局中, 如果同时通过width和flex-basis给伸缩项设置宽度
  那么会听flex-basis, width会失效
  2.如果flex-basis是auto,那么就会听width属性

伸缩布局的连写

伸缩项属性的连写: flex: flex-grow flex-shrink flex-basis;
放大比例: 默认值是0, 默认不会放大
缩小比例: 默认值是1, 等比缩小