教程：
Flexbox 布局的最簡單表單
Flex 布局教程：語法篇
Flex 布局教程：實例篇
-
父元素為 flex 布局時，如果其中一個子元素有高度，即使另一個子元素沒有高度，高度也會被撐開至等高，即默認改變項目的高度:
image.png
<div class="wrap">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
.wrap {
display: flex;
width: 400px;
margin: 200px auto;
padding: 20px;
background-color: #ccc;
}
.left {
width: 100px;
height: 100px;
background-color: yellow;
}
.right {
background-color: blue
}
- 父元素設置為 flex 布局后，子元素之間沒有間隙，如上面所示。
- 讓某個子元素占據剩余橫向空間，比如讓上面的 .right 元素占據剩余寬度，只需給 .right 加上:
flex-grow: 1;
flex-grow的值是占據剩余空間的比例。
- 如果需要占據剩余垂直空間，只需讓父元素：
flex-direction: column;
