Flex弹性布局笔记

布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

容器属性

• flex-direction: 设置主轴的方向

  • 默认值 row 从左到右
  • column 从上到下

• justify-content: 设置主轴上的子元素排列方式

  • 默认值 flex-start 从头部开始 如果主轴是x轴，则从左到右
  • center 在主轴居中对齐（如果主轴是x轴则水平居中）
  • space-around 平分剩余空间
  • space-between 先两边贴边 再平分剩余空间

• flex-wrap: 设置子元素是否换行

  • 默认值 nowrap 不换行
  • wrap 换行

• align-items: 设置侧轴上的子元素的排列方式（单行）

  • 默认值 flex-start 从上到下
  • center 挤在一起居中（垂直居中）
  • stretch 拉伸

• align-content: 设置侧轴上的子元素排列方式（只能用于子项出现换行的情况）

  • 默认值 flex-start 在侧轴的头部开始排列
  • center 在侧轴中间显示
  • space-around 子项在侧轴平分剩余空间
  • space-between 子项在侧轴先分布在两头，再平分剩余空间
  • stretch 设置子项元素高度平分父元素高度

• flex-flow: 复合属性，相当于同时设置了 flex-direction 和 flex-wrap

子项属性

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

参考

• MDN