【响应式Web设计】读书笔记 - 弹性布局与响应式图片（三） - 5

最新推荐文章于 2021-10-17 16:12:42 发布

一点编程

最新推荐文章于 2021-10-17 16:12:42 发布

阅读量527

点赞数

分类专栏：响应式Web设计文章标签：响应式web设计

本文链接：https://blog.csdn.net/JasonAPoint/article/details/72794103

版权

响应式Web设计专栏收录该内容

12 篇文章 0 订阅

订阅专栏

【简介】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>