关于前端:收藏40-个-CSS-布局技巧

简介： CSS是Web开发中不可或缺的一部分，随着Web技术的一直变革，CSS也变得更加弱小。CSS的泛滥属性你晓得了多少？具体开发中该应用什么属性才最适宜失当？现在的一些CSS属性能够让咱们节约更多的工夫。比方在Web布局中，古代CSS个性就能够更好的帮忙咱们疾速实现如等高布局，程度垂直居中，经典的圣杯布局、宽高比例、页脚放弃在底部等成果。淘系前端技术专家大漠将具体介绍一些不同的CSS属性来实现这些成果，心愿对同学们有所帮忙。

一程度垂直居中

如何实现程度垂直居中能够说是CSS面试题中的经典面试题，在多年前这个面试题给很多同学都带来了困惑，但Flexbxo布局模块和CSS Grid布局模块的到来，能够说实现程度垂直居中已是十分的容易。

Flexbox中实现程度垂直居中

在Flexbox布局模块中，不论是单行还是多行，要让它们在容器中程度垂直居中都是件易事，而且办法也有多种。最常见的是在Flex容器上设置对齐形式，在Flex我的项目上设置 margin:auto。

先来看在Flex容器上设置对齐形式。

Flex容器和Flex我的项目上设置对齐形式

你可能曾经晓得在Flex容器上设置 justify-content、align-items 的值为 center 时，能够让元素在Flex容器中达到程度垂直居中的成果。来看一个示例：

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

/* CSS */
.flex__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

成果如下：

这种形式特地适应于让Icon图标在容器中程度垂直居中，不同的是在Icon图标容器上显示设置 display: inline-flex。比方上面这个示例：

<!-- HTML -->
<div class="flex__container">
    <svg> </svg>
</div>

/* CSS */
.flex__container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

成果如下：

在这种模式之下，如果要让多个元素实现程度垂直居中的成果，那还须要加上 flex-direction: column，比方：

<!-- HTML -->
<div class="flex__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>

/* CSS */
.flex__container  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

成果如下：

在Flexbox布局中，还能够像上面这样让Flex我的项目在Flex容器中达到程度垂直居中的成果：

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

/* CSS */
.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}

.flex__item {
    align-self: center;
}

成果如下：

如果在Flex容器中有多个Flex我的项目时，该办法同样无效：

.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}

.flex__container > * {
    align-self: center;
}

比方上面这个成果：

除此之外，还能够应用 place-content: center 让Flex我的项目实现程度垂直居中：

.flex__container {
    display: flex;
    place-content: center;
}

.flex__item {
    align-self: center;
}

成果如下：

或者换：

.flex__container {
    display: flex;
    place-content: center;
    place-items: center;
}

成果如下：

这两种形式同样实用于Flex容器中有多个Flex我的项目的情景：

.flex__container {
    display: flex;
    flex-direction: column;
    place-content: center;
}

.flex__container > * {
    align-self: center;
}

// 或

.flex__container {
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
}

成果如下：

可能很多同学对于 place-content 和 place-items 会感到生疏。其实 place-content 是 align-content 和 justify-content 的简写属性；而 place-items 是 align-items 和 justify-items 的简写属性。即：

.flex__container {
    place-content: center;
    place-items: center;
}

等效于：

.flex__container {
    align-content: center;
    justify-content: center;

    align-items: center;
    justify-items: center;
}

尽管扩大进去有四个属性，但最终等效于：

.flex__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 多行
.flex__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

在Flex我的项目上设置margin: auto

如果在Flex容器中只有一个Flex我的项目，还能够显式在Flex我的项目中显式设置 margin 的值为auto，这样也能够让Flex我的项目在Flex容器中程度垂直居中。例如：

.flex__container {
    display: flex; // 或 inline-flex
}

.flex__item {
    margin: auto;
}

成果如下：

整个过程，你能够通过上面这个示例来体验。尝试着选中不同方向的 margin 值：

Grid中实现程度垂直居中

CSS Grid布局能够说是古代Web布局中的银弹。它也是到目前为止布局零碎中惟一一个二维布局零碎。

在CSS Grid布局中，只须要仅仅的几行代码也能够疾速的帮忙咱们实现程度垂直居中的成果。比方上面这个示例：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item"></div>
</div>

/* CSS */
.grid {
    display: grid; // 或 inline-grid
    place-items: center
}

成果如下：

在CSS Grid布局模块中，只有显式设置了 display: grid（或 inline-grid）就会创立Grid容器和Grid我的项目，也会主动生成网格线，即行和列（默认为一行一列）。

在没有显式地在Grid容器上设置 grid-template-columns 和 grid-template-rows，浏览器会将Grid容器默认设置为Grid内容大小：

这种办法也实用于CSS Grid容器中有多个子元素（Grid我的项目），比方：

<!-- HTML -->
<div class="grid__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>

这个时候你看到的成果如下:

而且 palce-items 实用于每个单元格。这意味着它将居中单元格的内容。比方上面这个示例：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item">
        <h3>Special title treatment</h3>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <div class="action">Go somewhere</div>
    </div>
</div>

/* CSS */
.grid__container {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh;
}


.grid__item {
    display: grid;
    place-items: center;
}

成果如下：

二等高布局

等高布局也是Web中十分常见的一种布局形式，而且实现等高布局的计划也有很多种。这里咱们次要来看Flexbox布局模块和Grid布局模块给咱们带来了什么样的变动。

在Flexbox和Grid布局模块中，让咱们实现等高布局曾经是十分的简略了，比方：

<!-- Flexbox -->
<flex__container>
    <flex__item></flex__item>
    <flex__item></flex__item>
    <flex__item></flex__item>
</flex__container>

/* CSS */
.flex__container {
    display: flex; // 或 inline-flex
}

简略地说，在容器上显式设置了 display 的值为 flex 或 inline-flex，该容器的所有子元素的高度都相等，因为容器的 align-items 的默认值为 stretch。

这个时候你看到的成果如下：

这种形式特地实用于卡片组件中：

在Grid布局模块中相似：

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
    <grid__item></grid__item>
    <grid__item></grid__item>
</grid__container>

/* CSS */
.grid__container {
    display: grid;
    grid-template-columns: 20vw 1fr 20vw; /* 依据需要调整值*/
}

成果如下：

同样在一些卡片类布局中使用：

如果需要有所调整，比方在Flex我的项目或 Grid我的项目的子元素高度和容器高度雷同。

<!-- HTML -->
<flex__container>
    <flex__item>
        <content></content>
    </flex__item>
</flex__container>

/* CSS */
.flex__container {
    display: flex;
}

.content {
    height: 100%
}

// 或
.grid__container {
    display: grid;
    grid-auto-flow: column;
}

.content {
    height: 100%;
}

成果如下：

三 Sticky Footer

首先用下图来形容什么是Sticky Footer布局成果：

Sticky Footer实现计划和等高、垂直居中一样，同样有很多种计划能够实现。

比方像上面这样的构造：

<!-- HTML -->
<header></header>
<main></main>
<footer></footer>

先来看Flexbox布局模块中的实现计划：

body {
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

能够尝试着在 main 区域右下角向下拖动，扭转主内容区域的高度，你会发现“当内容有余一屏时，会在页面的最底部，当内容超出一屏时，会主动往后延后”。

在Flexbox布局中，还能够在区域上设置上面的款式，达到相等的成果：

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

成果如下：

中的 flex: 1 0 auto 相当于是：

main {
    flex-grow: 1; /*容器有残余空间时，main区域会扩大*/
    flex-shrink: 0; /*容器有有余空间时，main区域不会膨胀*/
    flex-basis: auto; /*main区域高度的基准值为main内容主动高度*/
}

如果你想省事的话，能够在 main 上显式设置 flex-grow:1，因为 flex-shrink 和 flex-basis 的默认值为 1 和 auto。

在CSS Grid布局中咱们能够借助 1fr 让区域依据Grid容器残余空间来做计算。

.grid__container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

成果如下：

四均分列

在Web布局中，很多时候会对列做均分布局，最为常见的就是在挪动端的底部Bar，比方下图这样的一个成果：

在Flexbox和Grid还没呈现之前，如果心愿真正的做到均分成果，能够用 100%（或 100vw）除以具体的列数。比方：

<!-- HTML -->
<container>
    <column></column>
    <column></column>
    <column></column>
</container>

/* CCSS */
.container {
    inline-size: 50vw;
    min-inline-size: 320px;
    display: flex-row;
}

.column {
    float: left;
    width: calc(100% / 3);
}

成果如下：

通过浏览器调试器中能够发现，现个列的宽度都是相等的：

在Flexbox和Grid布局中，实现下面的成果会变得更容易地多。先来看Flexbox中的布局：

<!-- HTML -->
<flex__container>
    <flex__item></flex__item>
    <flex__item></flex__item>
    <flex__item></flex__item>
</flex__container>

/* CSS */
.flex__container {
    inline-size: 50vw;
    display: flex;
}

.flex__item {
    flex: 1;
}

成果如下：

在Flexbox布局模块中，当flex取的值是一个单值（无单位的数），比方示例中的 flex:1，它会当作显式的设置了 flex-grow: 1。浏览器计算出来的 flex：

接下来看Grid中如何实现上例的成果：

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
    <grid__item></grid__item>
    <grid__item></grid__item>
</grid__container>

/* CSS */
.grid__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*这里的3示意具体的列数*/
}

最终的成果是雷同的：

这样的布局形式也实用于其余的布局中。但不论是Flexbox还是Grid布局中，都存在肯定的缺点，当容器没有足够的空间包容Flex我的项目（或Grid我的项目）时，Flex我的项目或Grid我的项目会溢出（或暗藏，如果Flex容器或Grid容器显式设置了 overflow:hidden）：

修复这种景象最简略的形式是在Flex容器或Grid容器显式设置一个 min-width（或 min-inline-size）：

.flex__container {
    min-inline-size: 300px;
}

不过话又说回来，比方咱们的Flex我的项目（或Grid我的项目）是一个卡片，每张卡片宽度是相等之外，更心愿容器没有足够空间时，Flex我的项目（或Grid我的项目）会主动断行排列。

咱们持续通过示例向大家展现。先来看Flexbox实现计划：

.flex__container {
    display: flex;
    flex-wrap: wrap;
}

.flex__item {
    flex: 0 1 calc((100vw - 18vh) / 4); /* calc(100vw -18vh) / 4 是flex-basis的基准值 */
}

你能够尝试着调整浏览器的视窗宽度，当浏览器的视窗越来越小时，Flex容器宽度也就会越来越小，当Flex容器小到没有足够的空间包容四个Flex我的项目（就此例而言），那么Flex我的项目就会断行排列：

基于该例，如果把Flex我的项目的 flex 值改成：

.flex__item {
    flex: 0 0 400px;
}

这个时候，当Flex容器没有足够空间时，Flex我的项目会按 flex-basis: 400px 计算其宽度，Flex容器没有足够空间时，Flex就会断行：

反过来，如果Flex我的项目的值 flex 改成：

.flex__item {
    flex: 1 0 400px;
}

当Flex容器没有足够空间排列Flex我的项目时，Flex我的项目会按 flex-basis: 400px 计算其宽度，Flex会断行，并且同一行呈现残余空间时，Flex我的项目会扩大，占满整个Flex容器：

在Grid中实现相似的成果要更简单一点。能够应用 repeat() 函数，1fr 以及 auto-fit 等个性：

.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2vh;
}

成果如下：

如果你对这方面常识感兴趣的话，还能够移步浏览《Container Query Solutions with CSS Grid and Flexbox》一文。

其实在Grid中与 auto-fit 比照的值还有一个叫 auto-fill。但两者的差别是十分地大，用下图来形容 auto-fit 和 auto-fill 的差别：

另外这种形式也是到目前为止一种不须要借助CSS媒体查问就能够实现响应式布局成果。

五圣杯布局

圣杯布局（Holy Grail Layout）)是Web中典型的布局模式。看上去像下图这样：

对于圣杯布局而言，HTML构造是有肯定的要求，那就是内容为先：

<!-- HTML -->
<header></header>
<main>
    <article></article> <!-- 主内容 -->
    <nav></nav>
    <aside></aside>
</main>
<footer></footer>

在这里次要还是和大家一起探讨，如何应用Flexbox和Grid布局模块来实现圣杯布局。先来看Flexbox实现计划：

body {
    width: 100vw;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-height: 0;

    display: flex;
    align-items: stretch;
    width: 100%;
}

footer {
    margin-top: auto;
}

nav {
    width: 220px;
    order: -1;
}

article {
    flex: 1;
}

aside {
    width: 220px;
}

成果如下：

通过在 nav、aside 和 article 上显式设置 order 的值，能够很好的管制这三个区域的布局程序。比如说，心愿在之前排列，只须要在下面的示例根底上做一点点调整：

nav {
    order: 0;
}

aside {
    order: -1;
}

成果如下：

留神，order的默认值为0，值越大越排在前面！

在上例的根底上，借助CSS媒体对象的个性，能够很容易实现响应式的圣杯布局成果：

@media screen and (max-width: 800px) {
    main {
        flex-direction: column;
    }

    nav, aside {
        width: 100%;
    }
}

成果如下：

尝试着拖动浏览器来扭转视窗大小，你能够看到如下图的成果：

在Grid布局模块中，实现圣杯布局要比Flexbox布局模块中更容易，而且更灵便。在CSS Grid布局模块中，HTML构造能够更简洁：

<!-- HTML -->
<body>
    <header></header>
    <main></main>
    <nav></nav>
    <aside></aside>
    <footer></footer>
</body>

在CSS方面有很多种计划能够实现圣杯布局成果。咱们先来看第一种：

body {
    display: grid;
    grid-template: auto 1fr auto / 220px 1fr 220px;
}

header {
    grid-column: 1 / 4;
}

main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

nav {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

aside {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
footer {
    grid-column: 1 / 4;
}

成果如下：

下面示例采纳的是网格线来给每个区域进行定位的：

和Flexbox布局相似，在媒体查问中能够扭转每个网格区域的地位：

@media screen and (max-width: 800px) {
    body {
        grid-template-rows: auto;
        grid-template-columns: auto;
    }

    header,
    main,
    nav,
    aside,
    footer {
        grid-column: 1 / 2;
        min-height: auto;
    }

    main {
        grid-row: 3 / 4;
        margin: 0;
    }

    nav {
        grid-row: 2 / 3;
    }

    aside {
        grid-row: 4 / 5;
    }

    footer {
        grid-row: 5 / 6;
    }
}

除了 grid-template（即 grid-template-columns 和 grid-template-rows）之外，在Grid布局中还能够应用 grid-area 和 grid-template-areas 属性的联合，也能很不便的实现CSS圣杯布局。基于下面的示例上，只须要把你的CSS调整为：

body {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
}

header {
    grid-area: header;
}

main {
    grid-area: main;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

@media screen and (max-width: 800px) {
    body {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

成果如下：

你可能发现了它们之间的差异性：

前面这个示例中，、和区域宽度相等。这是因为咱们示例中通过 grid-template-areas 来申明网格，在应用 grid-template-areas 创立网格时，其实也隐式的创立了网格线，只不过他和 grid-template 不同的是 grid-template 能够显式的指定网格轨道大小，而 grid-template-areas 在该示例中相当于网格轨道大小都是 1fr。

如果咱们心愿的区域变得更大，那么能够在 grid-template-areas 上做个调整：

body {
    display: grid;
    grid-template-areas:
        "header header header header header"
        "nav main main main aside"
        "footer footer footer footer footer";
}

成果如下：

这个时候网格区域的划分像下图这样：

尽管在成果有所调整了，但还是均分状态。更好的解决方案是，将 grid-template-areas 和 grid-template 联合起来应用：

body {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 220px 1fr 220px;
    grid-template-rows: auto 1fr auto;
}

header {
    grid-area: header;
}

main {
    grid-area: main;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

@media screen and (max-width: 800px) {
    body {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }

    main {
        margin-left: 0;
        margin-right: 0;
    }
}

成果如下：

你能够发现，这个时候，网格线的区域的命名像下图这样：

六 12列网格布局

12列网格布局最早是由960.gs提出的网格布局零碎：

12列网格布局在设计零碎和CSS Framework中常常应用，比方业内经典的Bootstrap就采纳了12列网格布局零碎：

在社区中也有很多在线工具，帮忙咱们疾速构建12列网格零碎，比方 Free CSS Grid Tools & Resources For Developers 一文中列举的工具。

不过这里次要是想和大家一起看看在Flexbox和Grid布局模块中是如何实现12列的网格布局零碎。

先来看Flexbox布局模块。12列网格布局的HTMl构造个别相似于上面这样：

<!-- HTML -->
<flex__grid>
    <flex__row>
        <flex__item col4></flex__item col4>
        <flex__item col4></flex__item col4>
        <flex__item col4></flex__item col4>
    </flex__row>
</flex__grid>

留神，12列网格中，个别同一行的列数值和刚好等于12。比方下面的HTML构造，行中有三列，每列的宽度刚好四个网格宽度加两个列间距。并且在计算的时候有一套成熟的计算公式：

而且还设计上也会有所差别，比如说间隔容器两侧有没有间距等：

这些的差别对于计算公式和款式代码的设计都略有差别。咱们用其中一个为例：

:root {
    --gutter: 10px;
    --columns: 12;
    --span: 1;
}

.flex__container {
    display: flex;
    flex-direction: column;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.flex__row {
    display: flex;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}

.flex__row + .flex__row {
    margin-top: 2vh;
}

.flex__item {
    flex: 1 1
        calc((100% / var(--columns) - var(--gutter)) * var(--span));
    margin: 0 var(--gutter);
}

.flex__item1 {
    --span: 1;
}

.flex__item2 {
    --span: 2;
}

.flex__item3 {
    --span: 3;
}

.flex__item4 {
    --span: 4;
}

.flex__item5 {
    --span: 5;
}

.flex__item6 {
    --span: 6;
}

.flex__item7 {
    --span: 7;
}

.flex__item8 {
    --span: 8;
}

.flex__item9 {
    --span: 9;
}

.flex__item10 {
    --span: 10;
}

.flex__item11 {
    --span: 11;
}

.flex__item12 {
    --span: 12;
}

你会看到的成果如下：

在该示例中采纳了CSS自定义属性相干的个性，让整个计算变得更容易一些。

对于应用CSS Grid布局模块来实现12列网格布局，相对而言，不论是HTML构造还是CSS代码都会更繁难一些。在应用CSS Grid布局模块实现12列网格布局，将会使用到 repeat()、minmax()、gap 和 fr 等个性。具体的来看一个示例吧。

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
</grid__container>

咱们来看CSS代码：

应用 fr 将网格均分为相等的值，即每列宽度都是 1 个 fr；配合 repeat() 函数，即 repeat(12, 1fr) 创立了12列网格。
应用 gap 能够用来管制网格之间的间距。
配合 minmax() 还能够设置网格最小值。

具体的代码如下：

:root {
    --columns: 12;
    --gap: 10px;
    --span: 1;
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: 1fr;
    gap: var(--gap);
    padding-left: calc(var(--gap) / 2);
    padding-right: calc(var(--gap) / 2);
}

.grid__item {
    min-block-size: 10vh;
    grid-column: span var(--span);
}

.col1 {
    --span: 1;
}

.col2 {
    --span: 2;
}

.col3 {
    --span: 3;
}

.col4 {
    --span: 4;
}

.col5 {
    --span: 5;
}

.col6 {
    --span: 6;
}

.col7 {
    --span: 7;
}

.col8 {
    --span: 8;
}

.col9 {
    --span: 9;
}

.col10 {
    --span: 10;
}

.col11 {
    --span: 11;
}

.col12 {
    --span: 12;
}

你将看到的成果如下：

就该示例而言，grid-template-columns: repeat(12, 1fr) 创立网格如下图所示：

除了上述这种粗犷的形式，还能够更灵便一些，将 auto-fit、minmax() 以及 grid-auto-flow: dense 等来创立：

.grid__container {
    padding: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 1em;
    grid-auto-flow: dense;
}

对于 .grid__item 能够通过 grid-column、grid-row 来管制网格我的项目的地位：

加上 grid-auto-flow: dense 会依据Grid容器空间，Grid我的项目会主动流到适合的地位：

这种布局对于杂志类的布局十分的实用。有对于这方面更具体的介绍能够浏览@Keir Watson的《Responsive Grid Magazine Layout in Just 20 Lines of CSS》一文。

七两端对齐

在Web布局中时常碰到两端对齐的需要。在Flexbox布局中，时常在Flex容器中显式设置 justify-content 的值：

.flex__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    width: 100%;
}

但在开端行，如果和后面行的个数不雷同（Flex我的项目）就会呈现下图这样的成果：

像上图这样的成果，并不是咱们所须要的，因为咱们心愿在最初一行的Flex我的项目不足够排列满一行时，心愿Flex我的项目一个紧挨一个的排列：

在Flexbox要实现上图这样的成果，只须要在Flex容器中增加一个伪元素：

.flex__container::after {
    content: "";
    display: flex;
    flex: 0 1 32vw;
}

留神，伪元素的 flex-basis 倡议设置的和卡片的 flex-basis（或宽度）等同。这个时候你将看到像上面这样的示例：

不过这种形式也不是最佳的形式，当开端行的个数不只少一个时，就会呈现下图这样的成果：

面对这样的场景，咱们须要给Flex容器增加额定的空标签元素：

占位符元素数量 = 每行最大的列数 – 2

然而 gap属性呈现之后，要实现这样的成果就不难了：

body {
    padding: 1vh;
}

.flex__container {
    display: flex;
    flex-wrap: wrap;
    gap: 2vh;

    width: 100%;
}

.flex__item {
    flex: 0 1 calc((100vw - 8vh) / 4);
}

成果如下：

留神，gap 使用在Flexbox中到目前为止，仅失去了Firefox浏览器的反对。下面的示例，应用Firefox浏览器，你看到的成果如下：

在CSS Grid布局中，就能够间接应用 gap：

body {
    padding: 1vh;
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1vh;
}

成果如下：

八抉择最佳的值

很多时候，针对不同的场景，设计师会为咱们提供不同的设计格调，比方元素大小：

随着 clam() 函数的到来，这所有都变得容易地多。

clam() 函数承受三个参数，即 clam(MIN, VAL, MAX)，其中 MIN 示意最小值，VAL 示意首选值，MAX 示意最大值。它们之间：

如果 VAL 在 MIN 和 MAX 之间，则应用 VAL 作为函数的返回值。
如果 VAL 大于 MAX，则应用 MAX 作为函数的返回值。
如果 VAL 小于 MIN，则应用 MIN 作为函数的返回值。

咱们来看一个示例：

.element {
    /**
    * MIN = 100px
    * VAL = 50vw ➜ 依据视窗的宽度计算
    * MAX = 500px
    **/

    width: clamp(100px, 50vw, 500px);
}

比方浏览器视窗当初所处的地位是1200px的宽度，那么 .element 渲染的后果如下：

这个时候 .element 元素的 width 是 500px。此时，clamp(100px, 50vw, 500px) 相当于 clamp(100px, 600px, 500px)，对应的 VAL 值是 600px，大于 MAX 值，那么这个时候 clamp() 函数返回的值是 MAX，即 500px，这个时候 .element 的 width 值就是 500px（即 MAX 的值）。

如果咱们把浏览器视窗放大至 760px：

这个时候 .element 元素的 width 是 50vw。此时，clamp(100px, 50vw, 500px) 相当于clamp(100px, 380px, 500px)，对应的 VAL 值是 380px，该值大于 MIN 值（100px），小于 MAX 值（500px），那么这个时候 clamp() 函数返回的值是 VAL，即 50vw，这个时候 .element 的 width 值就是 50vw（即 VAL 的值）。

如果持续将浏览器的视窗放大至 170px：

这个时候 .element 元素的 width 是 100px。此时，clamp(100px, 50vw, 500px) 相当于 clamp(100px, 85px, 500px)，对应的 VAL 值是 85px，该值小于 MIN 值（100px），那么这个时候 clamp() 函数返回的值是 MIN，即 100px，这个时候 .element 的 width 值就是 100px（即 MIN 的值）。

就该示例而言，clamp(100px, 50vw, 500px) 还能够这样来了解：

元素 .element 的宽度不会小于 100px（有点相似于元素设置了 min-width: 100px）。
元素 .element 的宽度不会大于 500px（有点相似于元素设置了 max-width: 500px）。
首选值 VAL 为 50vw，只有当视窗的宽度大于 200px 且小于 1000px 时才会无效，即元素 .element 的宽度为 50vw（有点相似于元素设置了 width：50vw）。

九 Logo图标的对齐

我想你在Web开发中可能碰到过相似下图的这样的场景：

正像上图所示，Logo图像的有大有小（宽度和高度都不一样）。面对这样的业务场景，很多时候都心愿设计师能提供雷同尺寸的图像。但这样势必会影响Logo图像的外观。

前段时间看到@Ahmad Shadeed专门写了一篇博文《Aligning Logo Images in CSS》，就是介绍如何实现上图这样的布局成果。

其实实现这样的布局成果，次要使用到的就是CSS的 object-fit 属性，而这个属性早在多年前就失去了各大支流浏览器的反对。

这里咱们用一个简略的示例，来看看具体实现过程。先来看HTML构造：

<!-- HTML -->
<ul class="brands">
    <li class="brands__item">
        <a href="#">
            <img src="img/logo.png" alt="">
        </a>
    </li>
    <li> <!-- ... --> </li>
</ul>

居中对齐后面曾经介绍过了，这里次要是看图像大小方面的解决：

.brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
}

.brands__item {
    background: #eee;
}

.brands__item a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

这样就能实现上图的成果。你可能发现了，有些Logo图像带有背景色彩，如果让成果更好一些，能够把CSS混合模式相干的个性使用进来：

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

这个时候，你看到的成果如下：

object-fit 除了取值 contain 之外，还有其余几个值：

其实这个计划也实用于产品图片，人物头像等布局。

小结

文章中次要介绍了Web中一些布局的实现思路和具体计划。其实文章提到的成果，比方程度垂直居中、等高布局、均匀散布列和Sticky Footer等，在CSS中始终有多种解决方案，只不过随着CSS Flexbox布局模块和CSS Grid布局模块的到来，实现这些成果变得更为灵便和简洁。

当然，文章中提到的只是一些最为常见的一些成果，其实在Web布局中，特地是Flexbox布局和Grid布局中还存在着很多有意思的货色，只不过因为篇幅的起因没有一一列举。如果你感兴趣能够再开掘一些进去，如果你在这方面有更好的教训或计划，欢送在上面的评论中分享。最初心愿这篇文章对你平时的工作有所帮忙。

关于前端:收藏40-个-CSS-布局技巧

一程度垂直居中

Flexbox中实现程度垂直居中

Grid中实现程度垂直居中

二等高布局

三 Sticky Footer

四均分列

五圣杯布局

六 12列网格布局

七两端对齐

八抉择最佳的值

九 Logo图标的对齐

小结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:收藏40-个-CSS-布局技巧

一 程度垂直居中

Flexbox中实现程度垂直居中

Grid中实现程度垂直居中

二 等高布局

三 Sticky Footer

四 均分列

五 圣杯布局

六 12列网格布局

七 两端对齐

八 抉择最佳的值

九 Logo图标的对齐

小结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

一程度垂直居中

二等高布局

四均分列

五圣杯布局

七两端对齐

八抉择最佳的值

发表回复取消回复