第三章弹性布局与响应式图片 flex简单案例

余生皆假期-

已于 2022-07-14 04:39:43 修改

阅读量358

点赞数 1

分类专栏：读书笔记 # 《响应式Web设计：HTML5和CSS3实战》文章标签：前端

于 2022-07-13 17:46:56 首次发布

本文链接：https://blog.csdn.net/nullccc/article/details/125742489

版权

读书笔记同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

《响应式Web设计：HTML5和CSS3实战》

6 篇文章 0 订阅

订阅专栏

3.1 将固定像素大小转换为弹性比例大小

这个布局宽度为960像素，但页头和页脚都是与屏幕一样宽的。左侧边栏宽度是200像素。

按照左边左边宽度100像素，右边100像素，中间便是660像素。

使用960/200 = 0.208333333 得出右边百分比，其他宽度以此类推。以百分比为宽度设置css即可。

3.1.1 为什么需要 Flexbox

现有布局缺点：行内块与空白会渲染空白、复杂的浮动、表格与表元(display:table
布局，我也不懂)。

3.2 Flexbox 概述

效果：

代码：

<body>
<div class="Wrap">
    <div class="CenterMe">
        Hello, I'm centered with Flexbox!
        </div>
</body>


.CenterMe {
    background-color: indigo;
    color: #ebebeb;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

display: flex：这是Flexbox的根本所在。这里就是把当前元素设置为一个Flexbox（而
不是block或inline-block之类的）。
align-items：这是要在Flexbox中沿交叉轴对齐项目（在这个例子中垂直居中文本）。
justify-content：在这里设置内容沿主轴居中。在Flexbox中，可以把它想象成Word
软件中的一个按钮，用于左、中、右对齐文本。

3.3.2 偏移

<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>

.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;
}

其中，css最后一段的 margin-left: auto; 使的最后一个元素向右对其，margin占满了空闲区域。

3.3.3 反序

给包含元素的CSS加一行flex-direction: row-reverse，把最后一项的marginleft: auto改成margin-right: auto。

3.3.4 垂直排列

flex-direction:row;默认属性为row，所以是横向排列。改为竖向column即可。

3.3.8 简单的粘附页脚

<head>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            font-family: 'Oswald', sans-serif;
            color: #ebebeb;
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }
        .MainContent {
            flex: 1;
            color: #333;
            padding: .5rem;
        }
        .Footer {
            background-color: violet;
            padding: .5rem;
        }
    </style>
</head>

<body>
        <div class="MainContent">
        Here is a bunch of text up at the top. But there isn't enough
        content to push the footer to the bottom of the page.
        </div>
        <div class="Footer">
        However, thanks to flexbox, I've been put in my place.
        </div>
</body>

通过给 body 赋 min-height:100%，又给 .MainContent 赋 flex:1撑起高度，使得Footer被紧贴到视图底部，起到粘附页脚效果。

3.3.9 改变原始次序

order: -1; 设置优先次序

余生皆假期-

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
第三章弹性布局与响应式图片 flex简单案例

这个布局宽度为960像素，但页头和页脚都是与屏幕一样宽的。左侧边栏宽度是200像素。按照左边左边宽度100像素，右边100像素，中间便是660像素。使用960/200 = 0.208333333 得出右边百分比，其他宽度以此类推。以百分比为宽度设置css即可。现有布局缺点：行内块与空白会渲染空白、复杂的浮动、表格与表元(display:table布局，我也不懂)。效果：代码： display: flex：这是Flexbox的根本所在。这里就是把当前元素设置为一个Flexbox（而不是blo
复制链接

扫一扫