建議學習時長： 45分鐘
學習方式：深入
學習目標
- 能用 Flex 來實現元素的水平居中，兩端對齊和垂直居中。
詳細介紹
Flex布局，可以簡便、完整、響應式地實現各種頁面布局。
Flex 的語法見 這里。
下面是一些示例
多個元素在一行
HTML
<div class="ly">
<div class="ly__item">xxx</div>
<div class="ly__item">xxx</div>
<div class="ly__item">xxx</div>
<div class="ly__item">xxx</div>
</div>
CSS
.ly {
display: flex;
}
多個元素水平居中對齊
.ly {
display: flex;
justify-content: center;
}
多個元素水平兩端對齊
.ly {
display: flex;
justify-content: space-between;
}
多行多個元素水平兩端對齊
.ly {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
多個元素在一行，某個元素占據剩余部分
.ly {
display: flex;
}
// 給占據剩余部分的元素加該類名
.ly__item--fill {
flex-grow: 1;
}
多個元素水平居右對齊
.ly {
display: flex;
justify-content: flex-end;
}
多個元素垂直居中
.ly {
display: flex;
align-items: center;
}
多個元素水平垂直居中對齊
.ly {
display: flex;
justify-content: center;
align-items: center;
}
