强大的flex-CSDN博客

最近公司空档期，一年前端小白，闲着去面试了一下饿了么，问到了flex布局一类的，现做一下总结。

首先抛出一个问题：

flex: none;
flex: auto;
flex: 1;
flex: 50%;
复制代码

这几个有什么区别？如果你不是很了解，往下看。

明确一点：flex是flex-grow,flex-shrink,flex-basis的缩写。

flex-grow: 相对于其他灵活项目放大比例

1、默认值为0

2、合理取值为正数

3、相对于其他灵活项目进行扩展的量

flex-shrink: 相对于其他灵活项目缩小比例

1、默认值为1,取值num

2、只有在默认宽度大于容器才会进行收缩，不然不起效

flex-basis: 灵活项目的初始长度

1、默认值为auto（根据内容定）

2、取值为一个长度单位或百分比，即使给项目设置了宽度（width），flex-basis将替代

几种常见的写法：

flex: 1相当于

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
复制代码

flex: auto相当于

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
复制代码

flex: none相当于

flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
复制代码

flex: 100px相当于

flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
复制代码

flex: 20%相当于

flex-grow: 1;
flex-shrink: 1;
flex-basis: 20%;
复制代码

flex: 2 2相当于

flex-grow: 2;
flex-shrink: 2;
flex-basis: 0%;
复制代码

flex: 2 20%相当于

flex-grow: 2;
flex-shrink: 1;
flex-basis: 20%;
复制代码

flex:1和flex:auto的区别

这里说一下flex-basis值为auto的计算规则：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。

content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。

百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

这里引用一个例子：

<div class="parent">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

<style type="text/css">
  .parent {
    display: flex;
    width: 600px;
  }

  .parent>div {
    height: 100px;
  }

  .item-1 {
    width: 140px;
    flex: 2 1 0%; 
    background: blue;
  }

  .item-2 {
    width: 100px;
    flex: 2 1 auto;
    background: darkblue;
  }

  .item-3 {
    flex: 1 1 200px;
    background: lightblue;
  }
</style>
复制代码

主轴上父容器总尺寸为 600px

子元素的总基准值是：0% + auto + 200px = 300px，其中

0% 即 0 宽度
auto 对应取主尺寸即 100px 故剩余空间为 600px - 300px = 300px

伸缩放大系数之和为： 2 + 2 + 1 = 5

剩余空间分配如下：

item-1 和 item-2 各分配 2/5，各得 120px
item-3 分配 1/5，得 60px 各项目最终宽度为：
item-1 = 0% + 120px = 120px
item-2 = auto + 120px = 220px
item-3 = 200px + 60px = 260px 当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设

而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间

flex常用布局

1.当中间高度小于可视区高度时候，footer吸附在底部；中间高度大于可视区高度，footer始终在main下方

<body>
  <header>HEADER</header>
  <article>main</article>
  <footer>FOOTER</footer>
</body>
<style>
body, header, footer {
  margin: 0;
  padding: 0;
}
header, footer {
  height: 50px;
}
body {
  background: #f56c6c;
  display: flex;
  flex-direction: column;
}
article {
  background: pink;
  flex: auto;
}
</style>
复制代码

2、上 + 中（aside + content）+ 下

<body>
  <header>header</header>
  <div class="main">
    <aside>aside</aside>
    <article>CONTENT</article>
  </div>
  <footer>footer</footer>
</body>
<style>
body, header, footer, aside {
  margin: 0;
  text-align: center;
  padding: 0;
}
body {
  background: #f56c6c;
  display: flex;
  flex-direction: column;
}
header, footer {
  height: 50px;
}
.main {
  display: flex;
  flex: auto;
}
aside {
  width: 300px;
  background: lightBlue;
}
article {
  flex: auto;
  background: pink;
}
</style>
复制代码

3、上 + 中（圣杯布局）+ 下

<body>
  <header>header</header>
  <div class="main">
    <aside>left aside</aside>
    <article>CONTENT</article>
    <aside>right aside</aside>
  </div>
  <footer>footer</footer>
</body>
<style>
  body,
  header,
  footer,
  aside {
    margin: 0;
    text-align: center;
    padding: 0;
  }

  body {
    background: #f56c6c;
    display: flex;
    flex-direction: column;
  }

  header,
  footer {
    height: 50px;
  }

  .main {
    display: flex;
    flex: auto;
  }

  aside {
    width: 100px;
    background: lightBlue;
  }

  article {
    flex: auto;
    background: pink;
  }
</style>
复制代码

4、左侧side + 上中下

<body>
  <aside>aside</aside>
  <div class="main">
    <header>header</header>
    <article>content</article>
    <footer>footer</footer>
  </div>
</body>
<style>
body, header, footer, aside {
  margin: 0;
  text-align: center;
  padding: 0;
}
body {
  background: #f56c6c;
  display: flex;
}
header, footer {
  height: 50px;
}
.main {
  display: flex;
  flex-direction: column;
  flex: auto;
}
aside {
  width: 300px;
  background: lightBlue;
}
article {
  flex: auto;
  background: pink;
}
</style>
复制代码

5、上（固定）+ 中 + 下，常用于头部固定导航栏，中间自适应

<body> 
  <header>header</header>
  <div class="main">
    <aside>aside</aside>
    <article>content</article>
  </div>
  <footer>footer</footer>
</body>
<style>
body, header, footer, aside {
  margin: 0;
  text-align: center;
  padding: 0;
}
body {
  padding-top: 50px;
  background: #f56c6c;
  display: flex;
  flex-direction: column;
}
header, footer {
  height: 50px;
}
header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.main {
  display: flex;
  flex: auto;
}
aside {
  width: 300px;
  background: lightBlue;
}
article {
  flex: auto;
  background: pink;
}
</style>
复制代码

欢迎互相交流。