＜ CSS技巧 之 弹性布局( Flex布局 ) - 实例篇 ＞

已于 2022-04-22 10:09:04 修改
阅读量1.5k 收藏 23
点赞数 7
分类专栏： CSS技巧 文章标签： css 前端
于 2022-04-08 15:26:45 首次发布
原文链接：https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
版权

文章目录

💬 前言

通过 上一篇 文章，了解到了Flex布局 相关的语法知识，也知道了Flex各个属性值的大致用法。

但是身为程序员，自然是不能单靠死记硬背来学习知识，‘阮一峰’ 大佬显然也知道这个道理，在其博客发布了 相关 Flex布局的实例文章。接下来，参考 “ 一峰 ” 大佬的文章及其他百度资料，结合实际案例给大家讲解一下Flex布局的使用！

提示：以下是本篇文章正文内容，下面案例仅供参考。如有问题，欢迎评论指出！

一、为什么使用Flex布局 ( 唠叨话可略过 ) ？

首先，我们知道前端开发中，页面的排版往往是通过许许多多的样式对页面进行排版和布局。但是在以往的一些布局属性，如：position、float等属性对样式进行排布时，往往很难实现布局响应式。

或者说，实现响应式布局需要使用 ‘ 流媒体 ’，对页面大小进行动态捕获，且需要编写大量配套的样式。大大增加了工作量，降低了工作效率。同时，因为 ‘ 流媒体 ’需要动态捕获页面窗口大小，也导致了页面性能的下降。

所以W3C 在 2009年提出了 弹性布局（Flex布局）这么一种实现响应式布局的方案，为盒模型提供了较大的灵活性。让我们可以简便、完整、响应式地实现各种页面布局。加上目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

接下来废话不多说，进入案例环节！

二、实际案例

👉 骰子的布局

骰子的一面，最多可以放置9个点。
骰子布局下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到 codepen 查看Demo。

HTML模板

    <div class="box">
      <span class="item"></span>
    </div>

模板中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex容器中的子项目。如果有多个项目，就要添加多个span元素，以此类推。

> 骰子案例 - 单项目： 仅存在一个子项目

> 子项目左对齐

首先，只有左上角1个点的情况。设置flex容器后，Flex布局默认属性就是首行左对齐，所以一行代码就够了。
骰子案例 1.1
CSS代码

.box {
  display: flex;
}
> 子项目居中对齐

骰子单项目居中
CSS代码

.box {
   display: flex;
   justify-content: center;
 }
> 子项目右对齐

子项目右对齐
CSS代码

.box {
   display: flex;
   justify-content: flex-end;
 }
> 设置交叉轴对齐方式，可以垂直移动主轴。

骰子案例
CSS部分

.box {
   display: flex;
   align-items: center;
 }

骰子案例
CSS代码

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

骰子案例
CSS代码

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

> 骰子案例 - 双项目

双项目 1
CSS代码

.box {
  display: flex;
  justify-content: space-between;
}

双项目 2
CSS代码

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

双项目 3
CSS代码

.box {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
 }

双项目安案例 4

CSS代码

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

双项目案例 5

CSS代码

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

双项目 6
CSS代码

.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

> 骰子案例 - 三项目

三项目

CSS代码

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

骰子案例 - 四项目

四项目案例
CSS代码

.box {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   align-content: space-between;
 }

> 总结

经过骰子案例可以看出，其他布局都是诸如此类。需要灵活使用flex布局的属性值，通过日常实操中总结出来的。

👉 网格布局

1、基本网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
网格布局图一HTML代码

<div class="Grid">
	<div class="Grid-cell">...</div>
	<div class="Grid-cell">...</div>
	<div class="Grid-cell">...</div>
</div>

CSS代码

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

2、百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
百分比布局效果图HTML代码

<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>

CSS代码

.Grid {
  display: flex;
}

/* flex属性是flex-grow, flex-shrink 和 flex-basis的简写 */

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}

👉 圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

圣杯布局
HTML代码

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

CSS代码

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

如果是小屏幕，躯干的三栏自动变为垂直叠加。

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

👉 输入框的布局

我们常常需要在输入框的前方添加提示，后方添加按钮。
输入框布局效果图
HTML代码

<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

CSS代码

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

👉 悬挂式布局

有时，主栏的左侧或右侧，需要添加一个图片栏。
悬挂式布局
HTML代码

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

CSS代码

.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

👉 固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
固定底栏
HTML代码

<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS代码

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
/* 让content自己占据自己内容的大小 */
.Site-content {
  flex: 1;
}

👉 流式布局

每行的项目数固定，会自动分行。
流式布局
CSS代码

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

> 简单综合案例

案例效果图-1

HTML代码

  <div :class="$root.themeHomeChange === '1' ? 'keyApplications_light' : 'keyApplications'">
    <div class="header">
      <img src="@/assets/img/companyCenter/jiantou.png" />
      <span class="headerTitle">{{title}}</span>
      <!-- <span class="selectBox" ></span> -->
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item, index) in list"
        :title="item.label"
        :key="index"
        @click="tagClick(item)">
          <span
            class="icon"
            :style="{'background': `url(${item.url}) no-repeat`, 'background-size': '100% 100%'}"></span>
          <span class="label">{{item.label}}</span>
      </div>
    </div>
  </div>

CSS代码

  .keyApplications {
    width: calc(100% - 20px);
    height: 380px;
    padding: 10px;
    background: url(../../assets/img/riskControlCenter/hgjcjkBg.png) no-repeat;
    background-size: 100% 100%;
    .header {
      display: flex;
      align-items: center;
      // padding-left: 10px;
      margin-bottom: 5px;
      position: relative;
      .headerTitle {
        font-family: MicrosoftYaHei-Bold;
        font-size: 17px;
        color: #00F8FF;
        font-weight: 600;
        margin-left: 5px;
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 32px);
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 47%;
        height: 100px;
        margin: auto;
        cursor: pointer;
        color: #FFF;
        display: flex;
        justify-content: center;
        box-shadow: 0px 0px 8px 4px rgba(0,157,255,0.16);
        border-radius: 3px;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        &:hover {
          // 添加选中后的阴影
          box-shadow: 0px 0px 10px #00f8ff inset; 
          color: #00f8ff;
        }
        .icon {
          display: block;
          width: 50%;
          height: 50px;
          margin-top: 15px;
        }
        .label {
          font-size: 13px;
          font-weight: bold;
          position: absolute;
          bottom: 10px;
        }
      }
    }
  }

其中，通过灵活设置 容器内 子项目元素的大小，再设置超出换行，即可实现想要的布局效果。使用 justify-content: center; 实现子项目居中，在开发中，灵活混入 position 定位属性，可以使布局更加随心所欲。

三、参考材料

技术宅小温
关注
  • 7
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Flex各种常用布局示例
mobingdetong的专栏
11-07 861
Flex各种常用布局示例
html&CSS-----弹性布局案例展示
m0_73633088的博客
08-15 1301
html弹性布局作品展示，进来看看吧，有代码可直接复制使用。
HarmonyOS开发案例：【弹性布局】
最新发布
m0_70748845的博客
04-30 901
基于Flex容器组件，实现弹性布局效果。弹性布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
7个带有示例的CSS网格布局实例
web前端开发
05-11 1096
英文 |https://betterprogramming.pub/top-7-css-grid-layout-concepts-with-examples-18c85e4d0b27翻译...
前端开发常用到的flex布局简单范例
qq_39772898的博客
07-03 295
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
Flex布局实战详解
热门推荐
大爱仙尊
08-15 2万+
flex布局详解，弹性盒子布局，万能布局
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
实例讲解CSS3中的box-flex弹性盒属性布局
12-30
box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-...
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
css 弹性盒子实现骰子的效果
PrimaryColor
04-14 1368
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
前端工程师实战19：详解flex弹性盒布局与实战案例（图文并茂，小白也能听懂）
qq_26226059的博客
05-05 608
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！ flex弹性盒，伸缩盒 是一种新的布局手段，主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性，让元素跟随页面的大小改变而改变 弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器 通过display:flex来设置块级弹性容器 通过display:inline-flex设置为行内弹性..
CSS day12 移动端布局练习
qq_34620296的博客
09-13 728
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
CSS3 flex弹性布局
xiangxiongfly
07-21 1598
CSS3新增了一种新型的弹性盒子模型。通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。 此外记住一点：在使用弹性盒子模型之前，你必须为父元素定义display:flex;或display:inline-flex;，这样父元素才具有弹性盒子模型的特点。
【css】公共样式之flex
qq_45406325的博客
07-17 417
flex作为最经典最方便的一种布局方式，不受宽高限制，使用场景也会很多，回顾下flex属性设置，发现父子元素属性设置至少3个，而且display不可继承，这就导致每次用flex都要写很多重复代码，在公共样式里封装flex，通过类名方式可以高效快捷调用
弹性盒子布局(Flex)，做项目必会技能
qq_42774501的博客
11-27 8803
align-item是定义全部全部的子项，在父盒子身上设置；而align-self是定义单独一个子项，是在子项身上设置；两个属性的值基本作用相同，只是align-self是单独设置一个子元素flex-start：在交叉轴上向起点位置(向上/向下)对齐默认不再展示flex-end：在交叉轴上向结束位置(向上/向下)对齐给黄盒子设置flex-end属性值** center：居中对齐**给黄盒子设置center。
css中flex:1弹性布局例子
disadministrator的专栏
01-19 6674
#main { width: 220px; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items:
flex布局介绍和简单案例
xiasohuai的博客
07-21 8783
flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个盒子都可以指定为flex布局,但是要注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 基本案例1： &lt;ul&gt; &lt;li...
css—flex布局(实战篇)
qq_45700583的博客
10-18 275
文章目录 容器属性： flex-direction ——项目水平方向 flex-wrap ——项目是否换行 flex-flow ——前两个缩写,默认为：从左到右、不换行 justify-content ——项目的水平对齐方式 align-items ——项目的垂直对齐方式 align-content ——项目整体、之间的对齐方式 项目属性： order
e.target 和 e.currentTarget 的区别？
huangzhin的博客
04-24 521
e.target 和 e.currentTarget 的区别
Flex 布局教程：实例篇
05-17
好的，下面我们来看一些Flex布局的实例。 ## 实例一：水平居中 让一个元素在父容器中水平居中，可以使用以下方法： ```html <div class="container"> <div class="box">Hello World</div> </div> ``` ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { background-color: #ccc; padding: 20px; } ``` 解释： - `display: flex;`设置容器为Flex布局。 - `justify-content: center;`将子元素水平居中。 - `align-items: center;`将子元素垂直居中。 - `height: 100vh;`设置容器高度为100vh，保证子元素在垂直方向上居中。 ## 实例二：等分布局 让多个元素等分布局可以使用以下方法： ```html <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> ``` ```css .container { display: flex; justify-content: space-between; } .box { flex: 1; background-color: #ccc; padding: 20px; margin: 0 10px; } ``` 解释： - `display: flex;`设置容器为Flex布局。 - `justify-content: space-between;`将子元素等间距排列。 - `flex: 1;`将子元素等分布局。 ## 实例三：垂直居中 让一个元素在父容器中垂直居中，可以使用以下方法： ```html <div class="container"> <div class="box">Hello World</div> </div> ``` ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { background-color: #ccc; padding: 20px; margin: auto; } ``` 解释： - `display: flex;`设置容器为Flex布局。 - `justify-content: center;`将子元素水平居中。 - `align-items: center;`将子元素垂直居中。 - `height: 100vh;`设置容器高度为100vh，保证子元素在垂直方向上居中。 - `margin: auto;`使元素在水平方向上居中。 ## 实例四：项目排序 使用Flex布局可以很方便地对项目进行排序，例如： ```html <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> </div> ``` ```css .container { display: flex; flex-wrap: wrap; } .box { flex: 1 0 200px; height: 100px; background-color: #ccc; margin: 10px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #fff; text-shadow: 1px 1px #000; } .box:nth-child(1) { order: 3; } .box:nth-child(2) { order: 1; } .box:nth-child(3) { order: 4; } .box:nth-child(4) { order: 2; } .box:nth-child(5) { order: 5; } ``` 解释： - `display: flex;`设置容器为Flex布局。 - `flex-wrap: wrap;`设置弹性容器的子元素在一行排不下时，自动换行。 - `flex: 1 0 200px;`设置子元素的伸缩比例为1，基准大小为0，最大值为200px。 - `margin: 10px;`设置子元素的外边距为10px。 - `order:`设置子元素的显示顺序。 以上就是一些Flex布局的实例，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值