search

博客列表 >HTML FlexBox弹性盒布局知识

HTML FlexBox弹性盒布局知识

写代码的张先森
写代码的张先森原创
2020年06月23日 17:26:531523浏览

HTML FlexBox弹性盒布局知识讲解

首先我们想一下，为什么会有flex弹性布局？原因其实很简单，实现同样的一个页面布局，用原始的html+css布局技术可能要写100行代码去实现，在效率和时间上都是浪费，随着技术的不断进步，所以有了flex弹性布局，它可能需要10行代码就可以布局完成

1.讲到这里我们接下来先看两个例子，用html+css的定位和浮动分别写个例子

用浮动做布局示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>基于html+css浮动的二列布局</title>
  7.     <style>
  8.       * {
  9.         /* 初始化 */
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       aside,
  15.       main {
  16.         /* 设定侧边栏和主体的背景颜色和最小高度 */
  17.         background-color: #dedede;
  18.         min-height: 700px;
  19.       }
  21.       header,
  22.       footer {
  23.         /* 设定页眉页脚的背景颜色和高度 */
  24.         background-color: cadetblue;
  25.         height: 50px;
  26.       }
  28.       .wrap {
  29.         /* 给侧边栏和主体的父元素添加宽高 边框  */
  30.         width: 1000px;
  31.         border: 1px solid #000;
  32.         /* 添加溢出隐藏 防止父元素高度塌陷 */
  33.         overflow: hidden;
  34.         margin: 10px auto;
  35.       }
  37.       aside {
  38.         /* 侧边栏左浮动 */
  39.         width: 200px;
  40.         float: left;
  41.       }
  42.       main {
  43.         /* 主体部分右浮动 */
  44.         width: 790px;
  45.         float: right;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <header>页眉</header>
  51.     <div class="wrap">
  52.       <aside>侧边栏</aside>
  53.       <main>主体内容区</main>
  54.     </div>
  55.     <footer>页脚</footer>
  56.   </body>
  57. </html>

效果：

用定位做布局示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>基于html+css定位的二列布局</title>
  7.     <style>
  8.       * {
  9.         /* 初始化 */
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       aside,
  15.       main {
  16.         background-color: #dedede;
  17.         min-height: 700px;
  18.       }
  20.       header,
  21.       footer {
  22.         background-color: cadetblue;
  23.         height: 50px;
  24.       }
  26.       .wrap {
  27.         width: 1000px;
  28.         border: 1px solid #000;
  29.         min-height: 700px;
  30.         margin: 10px auto;
  32.         /* 定位父级 :给侧边栏和主体部分的父级定位*/
  33.         position: relative;
  34.       }
  36.       aside {
  37.         width: 200px;
  38.         /* 设定最小高度为父元素的高度 */
  39.         min-height: inherit;
  40.         /* 绝对定位 */
  41.         position: absolute;
  42.       }
  43.       main {
  44.         width: 790px;
  45.         /* 设定最小高度为父元素的高度 */
  46.         min-height: inherit;
  47.         /* 绝对定位 */
  48.         position: absolute;
  49.         /* 主体靠右 所以right=0  top=0   简写一下 */
  50.         right: 0;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <header>页眉</header>
  56.     <div class="wrap">
  57.       <aside>侧边栏</aside>
  58.       <main>主体内容区</main>
  59.     </div>
  60.     <footer>页脚</footer>
  61.   </body>
  62. </html>

效果：

附例：内容的多栏显示做法
代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>内容的多栏/列显示</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* 表示HTML */
  15.       :root {
  16.         font-size: 16px;
  17.         color: #555;
  18.       }
  20.       div {
  21.         border: 1px solid #000;
  22.         padding: 1rem;
  23.         /* 宽度显示60个字 */
  24.         width: 60rem;
  25.         margin: 30px auto;
  26.       }
  28.       div {
  29.         /* 分列显示 例分3列显示*/
  30.         column-count: 3;
  31.         /* 设置分割线 */
  32.         /* column-rule-style: solid;
  33.         /* 设置分割线宽度 */
  34.         /* column-rule-width: 1px; */
  35.         /* 设置分割线颜色 */
  36.         /* column-rule-color: red;  */
  37.         /* 以上三种的简写方式  类似边框写法 */
  38.         column-rule: 1px solid red;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div>
  44.       新华社北京6月22日电
  45.       中国－阿拉伯国家政党对话会特别会议22日以视频会议方式召开。中共中央总书记、国家主席习近平向会议致贺信。
  46.       习近平表示，值此中国－阿拉伯国家政党对话会特别会议开幕之际，我代表中国共产党，并以我个人的名义，向会议的召开表示热烈的祝贺，向出席会议的阿拉伯国家政党领导人表示诚挚的问候。
  47.       习近平指出，中阿友谊源远流长，历久弥新。中阿两大民族在古丝绸之路上出入相友，在共建“一带一路”中携手相伴，共同致力于实现国家富强、民族复兴梦想。面对突如其来的新冠肺炎疫情，中阿守望相助、共克时艰，谱写了共建中阿命运共同体的新篇章。患难见真情。经过携手抗疫的洗礼，中阿战略伙伴关系基础更加牢固，人民友谊更加深厚，合作前景更加光明。
  48.       习近平强调，此次疫情再次表明，人类是休戚与共的命运共同体。中国共产党和中国政府始终坚持人民至上、生命至上，全力以赴救治生命，疫情防控取得重大战略成果；始终本着公开、透明、负责任态度，积极参与和推动国际抗疫合作，始终力所能及支持和帮助国际社会抗疫斗争。中方愿同包括广大阿拉伯国家在内的国际社会加强团结合作，支持世界卫生组织发挥领导作用，共同推动构建人类卫生健康共同体。
  49.       习近平表示，中阿政党对话会是中国共产党与阿拉伯国家政党交流合作的重要平台。面对疫情带来的新形势新挑战，中国共产党愿同阿拉伯各国政党一道，发挥好中阿政党对话会的平台作用，继续加强战略沟通，深化疫情防控常态化形势下治国理政经验交流，相互尊重，互学互鉴，为构建新时代中阿命运共同体、实现中阿两大民族伟大复兴而不懈努力。预祝会议取得圆满成功。
  50.       中国－阿拉伯国家政党对话会特别会议由中共中央对外联络部主办。会议为期3天，主题为“携手共建新时代中阿命运共同体”。毛里塔尼亚总统加祖瓦尼，巴勒斯坦法塔赫主席、总统阿巴斯，叙利亚复兴党总书记、总统巴沙尔，摩洛哥公正与发展党总书记、首相奥斯曼尼等6位阿拉伯国家领导人向会议致辞，阿拉伯国家60余位主要政党领导人参加。阿方领导人表示，完全赞同习近平总书记对阿中战略伙伴关系的积极评价；高度赞赏中国党和政府在抗疫斗争中始终坚持“人民至上”的执政理念，并秉持人类命运共同体理念，积极参与和推动国际抗疫合作；感谢中方一贯支持阿拉伯国家捍卫主权和独立，认为香港、新疆等事务是中国内政，反对外部势力干涉中国内政；愿同中国共产党一道，加强战略沟通和理念互鉴，携手共建新时代阿中命运共同体。
  51.     </div>
  52.   </body>
  53. </html>

效果：

这个案例适用于内容的分列多栏显示，并不适用于布局，因为用作布局的话会有很多问题，这里我们就简单讲一下，有了解就可以

以上两个小示例我们可以看到都可以实现布局，但是代码可能就比较多了，这只是简单的写一下，复杂的布局用原始的html+css定位和浮动技术可能就有点太low了，好，那我们接下来就慢慢的学习一下flex弹性布局的知识吧！

注：在学习弹性布局的时候我们建议用火狐浏览器查看demo，火狐浏览器更直观的感受弹性布局

1.FlexBox弹性盒布局快速预览
知识点1：将容器转为弹性容器 display: flex;
知识点2：自动计算每个弹性项目在弹性容器中的平均宽度 flex: auto;
知识点3：我们也可以给每个弹性项目设置不同的宽高
知识点4：一旦将父元素转为弹性容器，内部的“子元素”就会自动成为： 弹性项目，这些项目之前不管什么标签，通通转为行内块 就是在“主轴”上排列

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>FlexBox弹性盒布局快速预览</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  11.         /* 如果这个容器中的内容要使用flexBox布局， 第一步就是必须将这个容器转为弹性盒子 */
  12.         /* 弹性容器 */
  13.         display: flex;
  14.       }
  15.       .container > .item {
  16.         /* 一旦将父元素转为弹性容器，内部的“子元素”就会自动成为： 弹性项目 */
  17.         /* 不管这个项目标签之前是什么类型，统统转为“行内块” */
  18.         /* 行内：全部在一排显示 */
  19.         /* 块：　可以设置宽和高 */
  20.         /* 自动计算每个弹性项目在弹性容器中的平均宽度 */
  21.         flex: auto;
  22.         /* 我们也可以给弹性项目设置宽高 */
  23.         /* width: 60px; */
  24.         /* height: 60px; */
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="container">
  30.       <div class="item">1</div>
  31.       <span class="item">2</span>
  32.       <a class="item">3</a>
  33.       <a class="item">4</a>
  34.       <a class="item">5</a>
  35.       <a class="item">6</a>
  36.     </div>
  37.   </body>
  38. </html>

效果：

2.FlexBox弹性盒多行容器
知识点1：将容器转为多行容器 flex-wrap: wrap;
知识点2：当在一行上的弹性项目排列超出弹性容器的宽度会换行显示

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>FlexBox弹性盒多行容器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         /* 弹性容器 */
  11.         display: flex;
  12.       }
  13.       .container > .item {
  14.         width: 60px;
  15.         width: 50px;
  16.         width: 120px;
  17.       }
  18.       /* 转为多行容器 换行显示 */
  19.       .container {
  20.         flex-wrap: wrap;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="container">
  26.       <div class="item">1</div>
  27.       <div class="item">2</div>
  28.       <div class="item">3</div>
  29.       <div class="item">4</div>
  30.       <div class="item">5</div>
  31.     </div>
  32.   </body>
  33. </html>

效果：

3.单行容器中的项目对齐方式
知识点1：理解项目两边和项目之间不同的对齐方式

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>单行容器中的项目对齐方式</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         display: flex;
  12.         /* justify-content: 控制所有项目在主轴上的对齐方式; */
  13.         /* 本质是：设置容器中的剩余空间在所有 “项目之间”的分配方案 */
  15.         /* 1. 容器剩余空间在所有项目“二边”的如何分配 ，将全部项目视为一个整体*/
  16.         /*  将剩余空间分配到结尾*/
  17.         justify-content: flex-start;
  18.         /* 将剩余空间分配给开头 */
  19.         /* justify-content: flex-end; */
  20.         /* 将剩余空间给两端平均分配 */
  21.         /* justify-content: center; */
  23.         /* 2. 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
  24.         /* 在所有项目之间平均分配 */
  25.         /* justify-content: space-between; */
  26.         /* 分散对齐: 剩余空间在所有项目二侧平均分配 */
  27.         /* justify-content: space-around; */
  28.         /* justify-content: space-evenly; */
  29.       }
  30.       .container > .item {
  31.         width: 60px;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">1</div>
  38.       <div class="item">2</div>
  39.       <div class="item">3</div>
  40.     </div>
  41.   </body>
  42. </html>

效果：

4.多行容器中的项目对齐方式
代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>多行容器中的项目对齐方式</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         display: flex;
  11.         /* 多行容器 */
  12.         flex-wrap: wrap;
  14.         height: 150px;
  16.         /* align-content: 设置多行容器中的项目排列; */
  18.         /* 1. 容器剩余空间在所有项目“二边”的如何分配 ，将全部项目视为一个整体*/
  19.         align-content: stretch;
  20.         align-content: flex-start;
  21.         align-content: flex-end;
  22.         align-content: center;
  24.         /* 2. 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
  25.         align-content: space-between;
  26.         align-content: space-around;
  27.         align-content: space-evenly;
  28.       }
  29.       .container > .item {
  30.         width: 60px;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <div class="item">4</div>
  40.       <div class="item">5</div>
  41.       <div class="item">6</div>
  42.       <div class="item">7</div>
  43.       <div class="item">8</div>
  44.     </div>
  45.   </body>
  46. </html>

效果：

5.主轴为垂直方向时的项目排列
知识点：改变主轴的排列方向 为垂直排列 flex-direction: column;

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>主轴为垂直方向时的项目排列</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 150px;
  11.         display: flex;
  12.         /* 主轴方向：默认为行 */
  13.         flex-direction: row;
  14.         /* 改变主轴的排列方向 为垂直 */
  15.         flex-direction: column;
  17.         /* 项目二边分配 */
  18.         justify-content: flex-start;
  19.         justify-content: flex-end;
  20.         justify-content: center;
  22.         /* 项目之间分配 */
  23.         justify-content: space-between;
  24.         justify-content: space-around;
  25.         justify-content: space-evenly;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="container">
  31.       <div class="item">1</div>
  32.       <div class="item">2</div>
  33.       <div class="item">3</div>
  34.     </div>
  35.   </body>
  36. </html>

效果:

6.项目在交叉轴上的排列
知识点：项目在交叉轴上默认是自动伸缩的
代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>项目在交叉轴上的排列</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 200px;
  11.         display: flex;
  12.         /* 项目在交叉轴上默认是自动伸缩的 */
  13.         align-items: stretch;
  15.         align-items: flex-start;
  16.         align-items: flex-end;
  17.         align-items: center;
  18.       }
  19.       .container > .item {
  20.         width: 60px;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="container">
  26.       <div class="item">1</div>
  27.       <div class="item">2</div>
  28.       <div class="item">3</div>
  29.     </div>
  30.   </body>
  31. </html>

效果：

7.flex容器属性实战: 快速撸一个主导航
代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex容器属性实战: 快速撸一个主导航</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: #ccc;
  17.       }
  19.       nav {
  20.         height: 40px;
  21.         background-color: #333;
  22.         padding: 0 50px;
  23.         /* 转为弹性盒布局 */
  24.         display: flex;
  25.       }
  27.       nav a {
  28.         height: inherit;
  29.         line-height: 40px;
  30.         padding: 0 15px;
  31.       }
  33.       nav a:hover {
  34.         background-color: lightpink;
  35.         color: white;
  36.       }
  38.       /* 登录/注册放在最右边 */
  39.       nav a:last-of-type {
  40.         margin-left: auto;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <header>
  46.       <nav>
  47.         <a href="">首页</a>
  48.         <a href="">京东物流</a>
  49.         <a href="">购物问答</a>
  50.         <a href="">调研问卷</a>
  51.         <a href="">登录/注册</a>
  52.       </nav>
  53.     </header>
  54.   </body>
  55. </html>

效果：

怎么样感觉，是不是简单的几行代码就实现了这么炫酷的效果，这就是flex弹性布局的优点

8.项目属性: order控制项目顺序
知识点：order 默认是0 数值越大越靠后

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>项目属性: order控制项目顺序</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  11.         display: flex;
  12.       }
  13.       .container > .item {
  14.         width: 60px;
  15.       }
  17.       .container > .item:first-of-type {
  18.         /* order: 默认是0 */
  19.         order: 3;
  20.       }
  22.       .container > .item:last-of-type {
  23.         /* order: 默认是0 */
  24.         order: 5;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="container">
  30.       <div class="item">1</div>
  31.       <div class="item">2</div>
  32.       <div class="item">3</div>
  33.     </div>
  34.   </body>
  35. </html>

效果：

9.order小案例，调整元素顺序，比如小相册
注：这个有js代码控制 大体意思就是 点击当前图片的上下按钮可以根据order属性去改变当前图片在这些图片中的位置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>order小案例，调整元素顺序，比如小相册</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  11.         display: flex;
  12.         flex-direction: column;
  13.       }
  14.       .container > .item {
  15.         border: 1px solid #000;
  16.         padding: 10px;
  17.         display: flex;
  19.         position: relative;
  20.       }
  21.       .container > .item > div {
  22.         display: flex;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item">
  29.         images-1.jpg
  30.         <div>
  31.           <button onclick="up(this)">上</button
  32.           ><button onclick="down(this)">下</button>
  33.         </div>
  34.       </div>
  35.       <div class="item">
  36.         images-2.jpg
  37.         <div>
  38.           <button onclick="up(this)">上</button
  39.           ><button onclick="down(this)">下</button>
  40.         </div>
  41.       </div>
  42.       <div class="item">
  43.         images-3.jpg
  44.         <div>
  45.           <button onclick="up(this)">上</button
  46.           ><button onclick="down(this)">下</button>
  47.         </div>
  48.       </div>
  49.     </div>
  51.     <script>
  52.       let up = (ele) => (ele.offsetParent.style.order -= 1);
  53.       let down = (ele) => (ele.offsetParent.style.order += 1);
  54.     </script>
  55.   </body>
  56. </html>

效果：

小结：

1.理解学到的弹性容器属性：flex-wrap justify-content align-items align-content flex-direction
2.理解学到的弹性项目属性：order
3.把这些属性结合到实例中自己动手试试，收获会很大
4.还有一部分项目属性，后面我们会更新

上一条：CSS重点之盒模型和定位技术下一条：基于浮动、定位方式的布局、分栏显示、flex容器实战和order控制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多