flex 补充¶

1、flex理解¶

弹性盒模型中（宽度是可以变化的百分比，不是固定的像素），子元素如何分配空间。不考虑盒子的内容，按照比例自动分配盒子的长度。注意：必须是弹性盒模型对象的子元素（如果是固定尺寸的对象无效）。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。（使用display：flex 可以设置弹性盒子）

基本使用

/* 父盒子中（默认主轴是横轴），每一个div的宽度都是1份 */
flex: flex-grow flex-shrink flex-basis |auto|initial|inherit;

.main {
  display: flex;
}

.main div {
  flex: 0 1 auto;(初始值)
}

.main {
  display: flex;

  /* 内部盒子元素的排列次序（主轴的方向）：默认是 row 行排列 */
  flex-direction: column; /* row row-reverse column column-reverse */    

  /* 默认子元素不会拆行显示，no-wrap。其他参数 wrap wrap-reverse。这个参数没有设置过*/ 
  flex-wrap: wrap;

  /* 子元素在主轴上的排列方式——默认是横轴 */
  jusfify-content: center | flex-start | flex-end | space-between | space-around

  /* 子元素在交叉轴上的排列方式——默认是纵轴 */
  align-item: center | flex-start | flex-end | stretch 子元素在纵向拉伸(长度是100%) | baseline 子元素基线对齐(文本对齐)  
}

.main div {
    flex-basis: 80px;
  /* 弹性盒子的初始长度是80px 这个参数通常不设置 */ 
}

.main div:nth-child(2) {
  flex-grow: 1;
  flex-shrink: 1;
  order: 3;
}

.main div:nth-child(3) {
  flex-grow: 3;
  flex-shrink: 2;
  order: 1;
}
/* 弹性盒子的伸缩比例：第二个盒子的伸长倍数是第一个的三倍，收缩倍数是第一个的2倍 */

order:表示项目的排列顺序：取整数，越小越靠前；

2、 flex设立的目的¶

问题一：解决垂直居中问题：传统的布局基于盒子模型，display-float-position 可以进行简单的布局；对于垂直居中，这个方式不是很好（margin-top 设置）此时使用 flex 更合适；

问题二：对于移动端适配问题：可以使用em或者rem单位进行适配，不过这些单位不是很灵活，对于文本可以使用这个单位，对于不同盒子，不同变化的比率，需要使用flex去进行灵活调节。

3、块级元素直接使用，行内块元素也可以使用

span {
  display: inline-flex;
}

4 注意¶

flex布局后，float、clear、verticle-align 会失效；

所以，首先使用float解决，之后使用flex布局解决；特殊情况使用position：absolute解决；

使用flex根据需求，看整体界面使用什么样式解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css" media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 1300px;
      height: 500px;
      background-color: #fff;
      border: 1px solid black;
      box-sizing: border-box;
    }
    .inner {
      width: 300px;
      height: 100px;
      background-color: yellow;
      border: 1px dashed #222;
    }

    .main {
      display: flex;
    }
    div #t1 {
      flex: 0 1 auto;
      background-color: teal;
      /* flex-grow flex-shrink flex-basis */
      /* 放大比例是0： 如果存在默认的空间，也不会放大 */
      /* 缩小比例是1： 如果空间不足，该项目会缩小 */
      /* 默认分配空间：默认分配空间是auto 自动分配 */
    }
    div #t2 {
      flex: 0 1 100px;
      background-color: yellowgreen;
    }
    div #t3 {
      flex: 1 2 auto;
      background-color: seagreen;
    }
    div #t4 {
      flex: 2 2 auto;
      background-color: darkblue;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="inner" id="t1">1</div>
    <div class="inner" id="t2">2</div>
    <div class="inner" id="t3">3</div>
    <div class="inner" id="t4">4</div>
  </div>
</body>
</html>

Last update: March 29, 2022