教程:
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;