flex布局中的align-items:stretch属性

align-items:stretch

align-items:stretch是一个默认值,永远保持在侧轴拉伸项目,怎么理解这句话呢?

• 如果侧轴是垂直方向,那么在垂直方向如果项目没有设置高度,则会拉伸至弹性父级盒子的高度,

• 如果侧轴为水平方向,如果项目没有设置宽度,那么就会拉伸其宽度至父级弹性盒子的宽度一致。

• 这里用一个布局例子详细解释这个属性
  我们想实现类似于这个效果，基本的布局思路是，给一个白色的大盒子弹性布局，设置主轴方向为column，然后让其两端对其，然后再让两个盒子设置为弹性盒子，两边对齐
  css样式思路:

• 给定大盒子宽度和高度,以及padding值

• 给两个小边框的盒子设置高度,因为是标准流,所以继承大盒子的宽度

• 给边框小盒子设置flex,两端对其
  

• 在两个小盒子设置了flex,并且设置两端对其,大盒子为设置flex之前,我们看到的是这个样子
  

• 在盒子设置了flex之后,我们看到的是这样的—stretch为我们拉伸了高度
  

• 给大盒子更该了主轴之后,我们看到的是这个样子的
  
  总结:总之一句话,弹性盒子侧轴为水平,如果其项目没有宽度,则会拉伸至弹性盒子一样的宽,如果侧轴为垂直,如果其项目没有高度,则会拉伸至弹性弹性盒子一样高