CSS - flex

1、概念

flex 布局指弹性布局，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局，行内元素也可以通过 inline-flex 使用 flex 布局。设置 flex 布局后，子元素的 float、clear、vertical-align 属性将失效

2、弹性盒子模型属性

1. flex-direction：设置子元素的排列方向
   • row：默认值，主轴为水平方向，从左往右
   • row-reverse：主轴为水平方向，从右往左
   • column：主轴为垂直方向，自上而下
   • column-reverse：主轴为垂直方向，自下而上
2. flex-wrap：设置子元素是否换行
   • nowrap：默认值，不换行
   • wrap：换行，第一行在上方
   • wrap-reverse：换行，第一行在下方
3. flex-flow：flex-direction 和 flex-wrap 的复合属性，默认值为 row nowrap
4. justify-content：设置子元素在横轴上的排列方式
   • flex-start：默认值，左对齐
   • flex-end：右对齐
   • center：居中
   • space-between：两端对齐，子元素之间的间隔相等
   • space-around：每个子元素之间的间隔相等，且子元素之间的间隔比子元素到父元素之间的距离大一倍
   • space-evently：子元素之间的间隔和子元素到父元素之间的距离相等
5. align-items：设置子元素在纵轴上的排列方式
   • flex-start：纵轴顶点对齐
   • flex-end：纵轴终点对齐
   • center：纵轴中点对齐
   • baseline：子元素第一行文字的基线对齐
   • stretch：默认值，如果子元素未设置高度 height 或设为 auto，将占满整个容器的高度；如果子元素设置了高度，则该属性无效
6. align-content：设置多行子元素之间的排列方式，当只有一行子元素或者 flex-wrap 属性值为 nowrap 时，该属性无效
   • stretch：默认值，每行子元素默认排列，行间有一定间隔
   • flex-start：子元素与纵轴的起点对齐，且行间没有间隔
   • flex-end：子元素与纵轴的终点对齐，且行间没有间隔
   • center：子元素与纵轴的中点对齐，且行间没有间隔
   • space-between：子元素与纵轴两端对齐，行间间隔相等
   • space-around：每行子元素的间隔都相等，且每行子元素之间的间隔比子元素到父元素的距离大一倍
   • space-evenly：每行子元素之间的间隔和子元素到父元素之间的距离相等

3、子元素的属性

1. order：设置某个子元素的排列先后顺序，数值越小，排列越靠前，默认为0
2. flex-grow：设置子元素的放大比例，默认为0，如果没有剩余空间，则放大无效
3. flex-shrink：设置子元素的缩小比例，默认为1
4. flex-basis：设置子元素理想的宽度，默认为 auto，可以设置一个长度值，定义子元素初始占据的宽度，当父元素装不下子元素时，子元素会按照 flex-shrink 来进行相应比例的缩小
5. flex：flex-grow、flex-shrink 和 flex-basis 的组合，默认值为 0 1 auto；该属性有两个快捷值：auto(1 1 auto) 和 none (0 0 auto)
6. align-self：设置单个子元素的纵轴排列方式，允许单个子元素有与其他子元素不一样的纵轴排列方式，可覆盖align-items 属性

flex 属性

flex 是 flex-grow、flex-shrink、flex-basis 的组合，默认值为 0 1 auto

flex-grow：设置子元素的放大比例

• 默认为0，即存在剩余空间，也不会放大
• 所有子元素的 flex-grow 都为1，等分剩余空间
• flex-gorw 为n的子元素，放大的比例是 flex-grow 为1的n倍

flex-shrink：设置子元素的缩小比例

• 默认为1，即如果空间不足，子元素会缩小
• 所有子元素的 flex-shrink 都为1，当空间不足时，缩小的比例相同
• flex-shrink 为0，当空间不足时，该子元素不会缩小
• flex-shrink 为n的子元素，当空间不足时，缩小的比例是 flex-shrink 为1的n倍

flex-basis：设置在分配多余空间之前，子元素占据的主轴空间，浏览器根据此属性计算主轴是否有剩余空间

• 默认值为 auto，及子元素原本大小
• 设置后子元素将占据固定空间

flex：

• 默认值为 0 1 auto：不放大会缩小
• none(0 0 auto)：不放大也不会缩小
• auto(1 1 auto)：放大且缩小
• flex 为一个非负数字n：该数字为 flex-grow 的值
  • flex-grow: n
  • flex-shrink: 1
  • flex-basis: 0%
• flex 为两个非负数字n1，n2：分别为 flex-grow 和 flex-shrink 的值
  • flex-grow: n1
  • flex-shrink: n2
  • flex-basis: 0%
• flex 为一个长度或百分比L：为 flex-basis 的值
  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: L
• flex 为一个非负数字n和一个长度或百分比L：分别为 flex-grow 和 flex-basis 的值
  • flex-grow: n
  • flex-shrink: 1
  • flex-basis: L