【简介】Flexbox 有4个关键特性:方向、对齐、次序和弹性。
1. 使用 Flexbox
1.1 垂直居中文本
HTML 部分:
<div class="CenterMe">
Hello, I'm centered with Flexbox!
</div>
CSS 样式:
.CenterMe {
background-color: indigo;
color: #ebebeb;
font-size: 2rem;
text-transform: uppercase;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
其中文本的垂直居中,通过下面三个属性实现:
.CenterMe {
display: flex;
align-items: center;
justify-content: center;
}
display: flex
: 将当前元素设置为 flexbox 元素(而不是 block 或 inline-block 元素)。align-items: center
: 将文本内容垂直居中。justify-content: center
: 将文本内容水平居中。
其中,align-items
和 justify-content
两个属性必须在设置display: flex
之后才能生效。
1.2 偏移
HTML 部分:
<div class="MenuWrap">
<a href="#" class="ListItem">Home</a>
<a href="#" class="ListItem">About Us</a>
<a href="#" class="ListItem">Products</a>
<a href="#" class="ListItem">Policy</a>
<a href="#" class="LastItem">Contact Us</a>
</div>
CSS 部分:
.MenuWrap {
background-color: indigo;
font-family: 'Oswald', sans-serif;
font-size: 1rem;
min-height: 2.75rem;
display: flex;
align-items: center;
padding: 0 1rem;
}
.ListItem, .LastItem {
color: #ebebeb;
text-decoration: none;
}
.ListItem {
margin-right: 1rem;
}
.LastItem {
margin-left: auto;
}
在对 <div class="MenuWrap">
设置了display: flex
后,其子元素(4个<a>
元素就会变成弹性项 flex-item),从而在弹性布局模型下布局,使用margin-left: auto
,能使最后一项的左外边距用上该侧所有可用的外边距。
1.3 反序
反序只需要将上面的例子中添加一行flex-direction: row-reverse
即可实现反序排列,同时,「Contact Us」这个元素变成了需要右边距,所以将margin-left: auto
改成 margin-right: auto
。
.MenuWrap {
background-color: indigo;
font-family: 'Oswald', sans-serif;
font-size: 1rem;
min-height: 2.75rem;
display: flex;
flex-direction: row-reverse;
align-items: center;
padding: 0 1rem;
}
.LastItem {
margin-right: auto;
}
注:这里只给出需要修改部分的代码。
1.4 垂直排列
垂直排布只需要将 flex-direction: column;
即可。
所需要的 CSS 样式:
.MenuWrap {
background-color: indigo;
font-family: 'Oswald', sans-serif;
font-size: 1rem;
min-height: 2.75rem;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1rem;
}
.ListItem, .LastItem {
color: #ebebeb;
text-decoration: none;
}
而要做反序处理,只需要将 flex-direction
设置为 column-reverse
即可。
1.5 使用媒体查询对flex布局做响应式适配
在窄视口中让各项垂直堆叠,在空间允许的情况下改成行式布局。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.MenuWrap {
background-color: indigo;
font-family: 'Oswald', sans-serif;
font-size: 1rem;
min-height: 2.75rem;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1rem;
}
@media screen and (min-width: 31.25rem) {
.MenuWrap{
flex-direction: row;
}
}
.ListItem, .LastItem {
color: #ebebeb;
text-decoration: none;
}
@media screen and (min-width: 31.25rem) {
.ListItem {
margin-right: 1rem;
}
.LastItem {
margin-left: auto;
}
}
</style>
</head>
<body>
<div class="MenuWrap">
<a href="#" class="ListItem">Home</a>
<a href="#" class="ListItem">About Us</a>
<a href="#" class="ListItem">Products</a>
<a href="#" class="ListItem">Policy</a>
<a href="#" class="LastItem">Contact Us</a>
</div>
</body>
</html>
注意变换视口大小查看效果。
欢迎大家关注我的新浪微博 - 一点编程,了解最新动态 。