css弹性盒子

display: flex

是一种布局方式。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex有六个属性。

1、flex-direction

容器内元素的排列方向(默认横向排列)。

header .profile-name {
    display: flex;
    flex-direction:column;
    margin-left: 10px;
  }
<header>
	<div class="profile-name">
	    <h3>Quincy Larson</h3>
	    <h4>@ossia</h4>
	</div>
	<div class="follow-btn">
	    <button>Follow</button>
	</div>
</header>

flex-direction:row; 沿水平主轴让元素从左向右排列

flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

flex-direction:row-reverse;沿水平主轴让元素从右向左排列

2、 flex-wrap

容器内元素的换行(默认不换行)，包裹一行或一列。可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。

nowrap：默认值，不换行。

wrap：行从上到下排，列从左到右排。

wrap-reverse：行从下到上排，列从右到左排。

#box-container {
    background: gray;
    display: flex;
    height: 100%;
    flex-wrap:  wrap;
  }
  <div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
  <div id="box-4"></div>
  <div id="box-5"></div>
  <div id="box-6"></div>
</div>

3、 justify-content

属性对齐元素。

 #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content:center;
  }
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

justify-content: center;让 flex 子元素排列在 flex 容器中间

flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放

flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。

space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。

space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边

4、align-items

属性对齐元素。对于行，它规定了项目在容器中应该靠上还是靠下，而对于列，就是靠左或靠右。

 #box-container {
    background: gray;
    display: flex;
    height: 500px;
    align-items:center;
  }
<div id="box-container">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>

flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。

flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。

center：把项目的位置调整到中间。对于行，垂直居中（项目上下方空间相等）。对于列，水平居中（项目左右方空间相等）。

stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。

baseline：基线对齐地排列。基线是字体相关的概念，可以认为字体坐落在基线上。

5、flex-shrink

收缩项目，flex-shrink会在容器太小时对元素作出调整。
如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。属性接受 number 类型的值。数值越大，与其他项目相比会被压缩得更厉害。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 100%;
    height: 200px;
    flex-shrink:1;
  }

  #box-2 {
    background-color: orangered;
    width: 100%;
    height: 200px;
    flex-shrink:2;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

6、flex-grow

扩展项目，与flex-shrink相对，flex-grow会在容器太大时对元素作出调整。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-grow:1;
  }
  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-grow:2;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

7、 flex-basis

设置项目的初始大小，指定了项目在 CSS 进行flex-shrink或flex-grow调整前的初始大小。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  
  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis:10em;
  }
  
  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis:20em;
  }
</style>
  
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

flex 短方法属性

flex 属性有一个简写方式。
flex: 1 0 10px;会把项目属性设为flex-grow: 1;flex-shrink: 0;以及flex-basis: 10px;

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    flex:2 2 150px;
    height: 200px;
  }

  #box-2 {
    background-color: orangered;
    flex:1 1 150px;
    height: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

8、order

重新排列项目。项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    order:2;
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    order:1;
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

9、align-self

允许调整每个项目自己的对齐方式，而不是一次性设置全部项目。允许值与align-items一样，并且它会覆盖align-items的值。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    align-self:center;
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    align-self:flex-end;
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>