css之一维布局flex

flex是一种用于按行或者按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

从概念上可以看出flex适合用于一维布局

容器盒子

主轴对齐

justify-content: flex-start flex-end center space-around space-between space-evenly

交叉轴对齐

align-content:stretch（默认） flex-start flex-end center space-around space-between space-evenly 
align-items: stretch（默认） flex-start flex-end center baseline

stretch：拉伸的意思，当子项不设置高度的适合，就拉伸到跟父级一样的高度

align-content生效的前提是必须要折行：

flex-wrap: wrap 
align-content: flex-end

align-items是表示每一行的对齐方式，而不是整体，align-content是针对整体的。所以，在工作用align-items是比较常用的。我们看看两者的差异：

display: flex; 
flex-wrap: wrap; 
align-content: flex-start;

display: flex; 
flex-wrap: wrap; 
align-items: flex-start;

align-content它会作为一个整体进行flex-start，align-items只是针对一行，这里设置了flex-wrap，所以把容器会分为上下两部分，那么每一行就在对应的小容器（上下两个容器）中flex-start

水平垂直居中

display: flex; 
justify-content: center; 
align-items: center;

利用margin:auto实现：

.father { display: flex; width: 500px; height: 500px; } 
.main div { width: 100px; height: 100px; margin: auto; }

利用margin:auto及position:absolute

.main { 
    width: 100px; 
    height: 100px; 
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; 
    margin: auto;
}

利用margin-right:auto占据剩余空间

.main { 
    width: 800px; 
    height: 500px; 
    background-color: bisque; 
    display: flex; 
} 
.main div { 
    width: 50px; 
    height: 100px; 
    background-color: 
    aquamarine; 
    margin-right: 10px; 
} 
.main div:nth-of-type(1) { 
    // 第一div会把所有剩余空间撑满，这样右边的元素会被挤到最右边 
    margin-right: auto; 
}

我们还可以分为多个组：

.main div:nth-of-type(1) { margin-right: auto; } 
.main div:nth-of-type(5) { margin-right: auto; }

子项

flex-grow

默认是0，表示不占用剩余的空白间隙扩展自己的宽度。

• 只有一个子元素的时候：flex-grow等于1，2，3是没有任何区别的，都表示沾满剩余空间，如果写0.5，那么就对剩余空间占一半。
• 如果有多个元素：会把剩余空间等比例分配，然后按照各自flex-grow设置的数字进行分配

flex-shrink

默认是1，表示flex容器空间不足时，元素的收缩比例。

flex-basis

默认是auto(自身大小)，作用是给item设置宽度的，优先级要大于width。如果同时设置了basis和width，那么basis会覆盖width。不过，如果设置了flex-direction: column，那么basis就覆盖height。

flex缩写: 它是flex-grow， flex-shrink，flex-basis的缩写

flex: 1 
等于
flex-grow: 1; flex-shrink: 1; flex-basis: auto;

等高布局

flex默认就是一个等高布局，因为子项的高度默认就是stretch拉伸。

sticky footer布局

.main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header,
.footer {
  height: 100px;
}
.content {
  flex-grow: 1;
}
<div class="main">
    <div class="header"></div>
      <div class="content">
        <div>等高布局</div>
      </div>
      <div class="footer">footer</div>
    </div>

溢出项布局

做出这种效果主要是把flex-shrink：0，不让它收缩。这个用在轮播图，导航栏的场景中。

.main {
  height: 100px;
  display: flex;
  align-items: center;
}
.main div {
  width: 100px;
  height: 80px;
  margin-right: 10px;
  flex-shrink: 0;
}