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=