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

最新推荐文章于 2022-07-13 17:46:56 发布

一点编程

最新推荐文章于 2022-07-13 17:46:56 发布

阅读量860

点赞数

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

本文链接：https://blog.csdn.net/jasonapoint/article/details/73811784

版权

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

12 篇文章 0 订阅

订阅专栏

【简介】主要讲解了flex属性（包括flex-grow、flex-shrink、flex-basis），order属性的排序作用，以及两个综合性案例。

1. Flex

flex属性具有定义宽度的功能。

.FlexInner {
    flex:1;
}

这里的 flex 实际上是三个属性合体的简写：flex-grow、flex-shrink、flex-basic。因此，详细的写法应为：

.FlexInner {
    flex:1 1 100px;
}

其中三个值从左到右依次为：flex-grow（伸展）、flex-shrink（收缩）、flex-basis（基准）。

这里写图片描述

其中三个值代表的含义为：

flex-grow：相对于其他伸缩项，当前伸缩项在空间允许的情况下可以伸展的量。
flex-shrink：在空间不够的情况下，当前伸缩项相对于其他伸缩项可以伸缩的量。
flex-basis：伸缩项伸缩的基准值。

下面我们来看这三个值的作用，首先看flex-basis，表示元素的宽度（相当于width）：

这里写图片描述

HTML 部分：

<div class="FlexWrapper">
    <div class="FlexItems FlexOne"></div>
    <div class="FlexItems FlexTwo"></div>
    <div class="FlexItems FlexThree"></div>
    <div class="FlexItems FlexFour"></div>
</div>

CSS 部分：

.FlexWrapper {
    height: 100px;
    width: 400px;
    border: 1px solid #c3c3c3;
    display: flex;
}
.FlexOne {
    background-color: lightblue;
    flex-basis: 100px;
}
.FlexTwo {
    background-color: red;
}
.FlexThree {
    background-color: lightgreen;
    flex-basis: 100px;
}
.FlexFour {
    background-color: yellow;
}

其中，对第一个和第三个 div 元素设置 flex-basis 为 100px，相当于设置这两个元素的 width 为 100px 的宽度，其余两个（第二个和第四个）未设置，所以宽度为 0。

第二个我们来看 flex-grow，这个元素在宽度有剩余的情况下，按比例分配给各个元素：

这里写图片描述

HTML 部分保持不变；

CSS 部分给第一个、第三个和第四个元素设置 flex-grow 为 1；给第二个元素设置 flex-grow 为 2；

.FlexOne {
    background-color: lightblue;
    flex-grow: 1;
    flex-basis: 100px;
}
.FlexTwo {
    background-color: red;
    flex-grow: 2;
}
.FlexThree {
    background-color: lightgreen;
    flex-grow: 1;
    flex-basis: 100px;
}
.FlexFour {
    background-color: yellow;
    flex-grow: 1;
}

这种情况下，子元素的基础宽度依次为 100px，0，100px，0，总共 200px，而父元素为 400px，则剩余 200px 的宽度空余。这 200px 的宽度按照 1：2：1：1 的比例分配给四个元素，即：

第一个元素：100 + 200 / 4 * 1 = 140 px；
第二个元素：0 + 200 / 4 * 2 = 80 px；
第三个元素：100 + 200 / 4 * 1 = 140 px；
第四个元素：0 + 200 / 4 * 1 = 40 px；

剩下一个 flex-shrink 的作用域 flex-grow 相反，指在空间不足的情况下，对于不够的空间，由元素按比例减去：

这里写图片描述

HTML 部分保持不变；

CSS 部分改为：

.FlexOne {
    background-color: lightblue;
    flex-shrink: 1;
    flex-basis: 100px;
}
.FlexTwo {
    background-color: red;
    flex-shrink: 2;
    flex-basis: 200px;
}
.FlexThree {
    background-color: lightgreen;
    flex-shrink: 1;
    flex-basis: 100px;
}
.FlexFour {
    background-color: yellow;
    flex-shrink: 1;
    flex-basis: 100px;
}

此时，四个子元素宽度依次为 100px、200px、100px、100px，总共 500px，父元素为 400px，则有 100px 的宽度不足，需要从四个子元素中消去，比例为 1：2：1：1，消去的方法为 flex-shrink 和flex-basis 的乘积所占的比例：

总量 = 100 * 1 + 200 * 2 + 100 * 1 + 100 * 1 = 700；
则每个元素需要消去：

第一个元素消去：100 * （100*1 / 700）= 14.3px；
第二个元素消去：100 * （200*2 / 700）= 57.2px；
第三个元素消去：100 * （100*1 / 700）= 14.3px；
第四个元素消去：100 * （100*1 / 700）= 14.3px；

则每个元素实际宽度：

第一个元素：100 - 14.3 = 85.7px；
第二个元素：200 - 57.2 = 142.8px；
第三个元素：100 - 14.3 = 85.7px；
第四个元素：100 - 14.3 = 85.7px；

这部分还有一个需要注意的点：

如果父级空间足够：flex-grow 有效， flex-shrink 无效。
如果父级空间不够：flex-grow 无效， flex-shrink 有效。

2. flex 应用 - 让页脚停留在视口底部

这里写图片描述

HTML 部分：

<body>
    <div class="MainContent">主要内容</div>
    <div class="Footer">底部内容</div>
</body>

CSS 部分：

body {
    font-family: 'Oswald', sans-serif;
    color: #ebebeb;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.MainContent {
    flex: 1;
    color: #333;
    padding: .5rem;
    height: 300px;
    background-color: #eee;
}
.Footer {
    background-color: violet;
}

因为对 MainContent 元素设置了 flex：1，则在空间足够的情况下，flex-grow 生效，MainContent 元素填充剩余所有空间（这里父元素为 body，有最小高度为整个页面高度），则 Footer 元素就被放在了底部。

3. 改变原始次序

Flexbox 流式布局具有重新排列的能力。例如原始次序为：

这里写图片描述

HTML 部分：

<div class="FlexWrapper">
    <div class="FlexItems FlexHeader">Header</div>
    <div class="FlexItems FlexSideOne">SideOne</div>
    <div class="FlexItems FlexContent">Content</div>
    <div class="FlexItems FlexSideTwo">SideTwo</div>
    <div class="FlexItems FlexFooter">Footer</div>
</div>

CSS 部分：

.FlexWrapper {
    background-color: indigo;
    display: flex;
    flex-direction: column;
}
.FlexItems {
    display: flex;
    align-items: center;
    min-height: 6.25rem;
    padding: 1rem;
    justify-content: center;
}
.FlexHeader {
    background-color: #105b63;
}
.FlexSideOne {
    background-color: #ffd34e;
}
.FlexContent {
    background-color: #fffad5;
}
.FlexSideTwo {
    background-color: #db9e36;
}
.FlexFooter {
    background-color: #bd4932;
}

通过 order 属性可以在 Flexbox 中修改元素的次序：

修改 CSS 样式：

.FlexContent {
    background-color: #fffad5;
    order:-1;
}

则排列顺序为：

这里写图片描述

4. 改变次序 + 媒体查询

通过媒体查询和改变次序的方式，可以让不同的屏幕不仅得到不同的布局，而且次序也会改变。

HTML 部分把主内容 Content 放在页面开头，可以方便我们编程：

<div class="FlexWrapper">
    <div class="FlexItems FlexContent">Content</div>
    <div class="FlexItems FlexSideOne">SideOne</div>
    <div class="FlexItems FlexSideTwo">SideTwo</div>
    <div class="FlexItems FlexHeader">Header</div>
    <div class="FlexItems FlexFooter">Footer</div>
</div>

对最小屏幕的排序的 CSS 样式：

.FlexHeader {
    background-color: #105b63;
    order: 1;
}
.FlexContent {
    background-color: #fffad5;
    order: 2;
}
.FlexSideOne {
    background-color: #ffd34e;
    order: 3;

}
.FlexSideTwo {
    background-color: #db9e36;
    order: 4;
}
.FlexFooter {
    background-color: #bd4932;
    order: 5;
}

效果如图：

这里写图片描述

在某一个宽度处设置断点：

@media (min-width: 30rem) {
    .FlexWrapper {
        flex-flow: row wrap;
    }
    .FlexHeader {
        width: 100%;
    }
    .FlexContent {
        flex:1;
        order: 3;
    }
    .FlexSideOne {
        width: 150px;
        order: 2;
    }
    .FlexSideTwo {
        width: 150px;
        order: 4;
    }
    .FlexFooter {
        width: 100%;
    }
}