Flexbox

布局排列需求

1. 内容不足时想自适应撑满，怎么做
2. 内容撑满时，子条目如何分配空间
3. 如何实现子条目换行

基础

• flex块级元素，inline-flex行内元素
• 由伸缩容器和伸缩条目构成，支持任意嵌套，内外互不干扰
• flex-grow增长系数，flex-shrink收缩系数。总和不足 1 时，按 1 计算
• 父元素设置flex-wrap: wrap;，配合某个子条目设置flex-basis: 100%;，可以实现后续内容换行排列

justify-content	两头间隔
space-between	没有（仅元素间有）
space-around	有，但为半格
space-evenly	有，与其它间隔相等

缩写 grow, shrink, basis

flex: 1

解决如何灵活分配空间（传统布局问题）

1. 多余空间的分配

   实现三栏等高布局，两边侧栏定宽，中间内容占用剩余空间

<style>
  section {
    display: flex;
  }
  .left-side,
  .right-side {
    width: 200px;
  }
  .content {
    flex-grow: 1;
  }
</style>
<section>
  <div class="left-side"></div>
  <div class="content"></div>
  <div class="right-side"></div>
</section>

2. 空间不足时收缩

justify-self

比如，有三个元素，两个元素紧挨排列，第三个元素居右。首先不能用 justify-content

.box  {
  display; flex;
}
.push {
  margin-left: auto;
}

Box alignment in Flexbox - CSS（层叠样式表） | MDN

兼容性

• IE10 需要-ms-前缀，IE11 支持flex，但有一些 bug
• UC 需要-webkit-box

参考

Flexbox Cheatsheet
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets | MDN
文章 - Flex 子元素高度塌陷 | 前端网（QDFuns）
JS Bin - Collaborative JavaScript Debugging
移动端全兼容的 flexbox 速成班 - 前端技术 - 腾讯 ISUX
css - Margin collapsing in flexbox - Stack Overflow
CSS Flexible Box Layout Module Level 1
Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid — Smashing Magazine
gridtoflex.com

chrome73,74 版本以后 flex 布局 Web 应用程序中的溢出将不再起作用，要在 flex 父元素，原来是 min-height: auto; 现在改为 min-height: 0;才可以