前端弹性布局flex基础知识 - 第十二期_前端开发

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 前端弹性布局flex基础知识

博主信息

博文 53

粉丝 3

访问量 58889

专题推荐

更多>

0622作业

1.基于浮动的两列布局复习

关键是

1.通过float: left;设置左边栏。
2.float: right;设置内容区
3.为解决因高度塌陷导致页脚占据主体位置被遮挡 ,让父级可以包住子元素，.wrap容器设置overflow: hidden属性;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基于浮动的两列布局复习</title>
    <style>
      header,footer,aside,main {
        /* 各自给一个初始化的背景色 */
        background-color: #ccc;
      }
      header,footer {
        /* 页眉、页脚的高度设置 */
        height: 50px;
      }
      main,aside {
        /* 主体和边栏给个最小高度撑起来，没有内容也可以显示 */
        min-height: 500px;
      }
      .wrap {
        /* 容器浮动设置 */
        width: 1000px;
        border: 1px solid #000;
        /* 解决因高度塌陷导致页脚占据主体位置被遮挡 ,让父级可以包住子元素*/
        overflow: hidden;
        /* 容器居中设置 */
        margin: 10px auto;
      }
      aside {
        width: 200px;
        /* 将侧边栏设置为左浮动 */
        float: left;
      }
      main {
        /* 因为总宽度是1000，左边aside占据了200，剩下800，留下部分间隔作为外边距*/
        width: 790px;
        /* 将主体设置为右浮动 */
        float: right;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <div class="wrap">
      <aside>侧边栏</aside>
      <main>主体内容区</main>
    </div>
    <footer>页脚</footer>
  </body>
</html>

2.基于定位的两列布局复习

关键步骤：

使用定位的方法即使父元素包不住子元素也不能用overflow: hidden;，该属性适用于float元素，这里用定位没用浮动也是无法包住溢出元素的。
解决方案：设置继承高度。为防止超出，左边栏aside和内容区main设置min-height: inherit;最小高度自动继承父元素的高度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基于定位实现的两列布局复习</title>
    <style>
      header,footer,aside,main {
        /* 各自给一个初始化的背景色 */
        background-color: #ccc;
      }
      header,footer {
        /* 页眉、页脚的高度设置 */
        height: 50px;
      }
      main,aside {
        /* 主体和边栏给个最小高度撑起来，没有内容也可以显示 */
        min-height: 500px;
      }
      .wrap {
        /* 设置定位父级作为参考点 */
        position: relative;
        width: 1000px;
        border: 1px solid #000;
        /* 容器居中设置 */
        margin: 10px auto;
        /* 这里包不住也不能用overflow: hidden;，该属性适用于float元素，这里用定位没用浮动也是无法包住溢出元素的 */
        /* 解决方案：添加高度 */
        min-height: 600px;
      }
      aside {
        width: 200px;
        /* 左边栏设为绝对定位，找父元素从左上角开始定位 */
        position: absolute;
        /* 为防止超出，最小高度自动继承父元素的高度 */
        min-height: inherit;
        /* 左边栏左上角对齐父元素左上角，下面的top: 0;left: 0;是默认值，可以省略 */
        top: 0;
        left: 0;
      }
      main {
        /* 因为总宽度是1000，左边aside占据了200，剩下800，留下部分间隔作为外边距*/
        width: 790px;
        background-color: wheat;
        /* 内容栏也设为绝对定位*/
        position: absolute;
        /* 找父元素右上角定位  */
        /* 为防止超出，最小高度自动继承父元素的高度 */
        min-height: inherit;
        right: 0;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <div class="wrap">
      <aside>侧边栏</aside>
      <main>主体内容区</main>
    </div>
    <footer>页脚</footer>
  </body>
</html>

3.内容的多栏/多列显示

关键代码

分列显示 column-count: 列数
分隔条 column-rule

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内容的多栏/多列显示</title>
    <style>
      /* 样式初始化的套路 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      /* 可以用一个伪类：root来代替html */
      :root {
        font-size: 16px;
        color: #555;
      }
      div {
        border: 1px solid #000;
        /* 相对跟元素的字体大小进行设置padding */
        padding: 1rem;
        width: 60rem;
        /* 居中设置 margin：上下 30px 左右自动 */
        margin: 30px auto;
      }
      div {
        /* 分列显示  column-count: 列数 */
        column-count: 3;
        /* 设置列数后，列宽可以自动计算，反之亦然，既然是自动，其实也可以略去不写 */
        /* column-width: auto; */
        /* 分隔条 */
        column-rule-style: solid;
        /* 分隔条的粗细 column-rule-width:3px 默认值是3px*/
        column-rule-width: 1px;
        /* 分割线的颜色，默认为黑色 */
        column-rule-color: salmon;
        /* 以上三个column-rule设置可以简写合并为column-rule */
        column-rule: 1px solid salmon;
      }
    </style>
  </head>
  <body>
    <div>
      6月21日，交个朋友科技公司创始人罗永浩在做客极客公园Rebuild 2020大会时表示，自己做直播带货在形式上做到了 60 分，内容上还是不及格的。“我们每天都在修正自己的意见，修正自己的想法，我们有好几个尝试的方向正在慢慢试。然后我估计再做 3 个月以上，可能就能到 80 分、90 分这个样子。”  罗永浩谈到，因为他直播卖的是别人的产品，不是自己的产品，所以某种程度上是一个服务性质的，他个人的意志在产品上是没有体现的，但是未来如果他们自己做自有品牌，就会在产品上体现很多他个人的想法。罗永浩认为，做自有品牌更大概率是投资的形式，多过自己做的可能性。 罗永浩以前做锤子科技，只有不到 10 个月是正现金流，剩下全是在亏的，所以公司团建就成了一门硬功夫，现在做直播电商，因为它第一天就是盈利的，所以根本不搞团建，发红包就完了。 多年以来大家说罗永浩是脱口秀演员、相声演员，但实际上他一天也没有做过。不过，罗永浩透露，他自己现在就准备再勇敢的走出这一步，准备在一个大平台上做一个正经的综艺节目，就是一个脱口秀节目，可能先季播，后面做成是周播的，现在正在组建团队罗永浩透露，公司内部很冷静、很清醒地认为，他做直播电商还需要扩大自己的影响面，一定要出圈。“因为我们讨论到一个问题，就是说如果我们想做成中国最成功的直播电商主播，那我还要扩大我的影响面。我们内部很冷静、很清醒地说一定要破这个圈，要出圈。最大范围的出圈一定不是别的，就是做娱乐行业相关的，才能最大程度出圈，所以我们决定做这么一档节目。”
    </div>
  </body>
</html>

4. column-count分列

column-count分列只能对称等分,布局中不推荐使用，主要用途是内容排版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>column-count分列</title>
    <style>
      header,
      footer {
        background-color: skyblue;
        height: 40px;
      }
      .container {
        width: 1000px;
        margin: 10px auto;
        border: 1px solid #000;
        /* 分栏，示例分三列 */
        column-count: 3;
      }
      aside {
        background-color: lightgreen;
        min-height: 600px;
      }
      main {
        background-color: lightcoral;
        min-height: 600px;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <div class="container">
      <aside>左边栏</aside>
      <main>主体内容</main>
      <aside>右边栏</aside>
    </div>
    <footer>页脚</footer>
  </body>
</html>

5. flexbox弹性盒子布局

建议使用火狐浏览器方便调试
下载地址 http://www.firefox.com.cn/download/
vscode 文件->首选项->设置中搜索框输入browser

自定义Live Server打开的浏览器为firefox
如果这个容器中的内容使用FlexBox弹性盒子布局，第一步必须display: flex;将这个容器转为弹性盒子
查看盒子布局信息点击flex标签
display:flex 将当前容器转为弹性盒子
一旦将父元素转为弹性容器，内部的子元素就自动成为：弹性项目
不管这个项目标签之前是什么类型，统统转为“行内块”
行内：全部在一排显示
块：可以设置高和宽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlexBox弹性盒子布局</title>
    <style>
      .container {
        width: 300px;
        /* 如果这个容器中的内容使用FlexBox弹性盒子布局，第一步必须将这个容器转为弹性盒子 */
        /* 将当前容器转为弹性容器 */
        display: flex;
      }
      .container > .item {
        /*  一旦将父元素转为弹性容器，内部的子元素就自动成为：弹性项目*/
        /* 不管这个项目标签之前是什么类型，统统转为“行内块” */
        /* 行内：全部在一排显示 */
        /* 块：可以设置高和宽  */
        flex: auto;
        /* width: 60px;
        height: 60px; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 不管多少个都会在一样自动缩放 -->
      <item class="item">1</item>
      <span class="item">2</span>
      <a class="item">3</a>
      <a class="item">4</a>
      <a class="item">5</a>
      <a class="item">6</a>
      <a class="item">7</a>
      <a class="item">8</a>
      <a class="item">9</a>
    </div>
  </body>
</html>

6. 多行容器的换行排列

所有的项目必须沿着主轴排列
跟主轴垂直的叫交叉轴
默认叫单行容器，一旦换行叫多行容器
换行显示 flex-wrap:warp； 默认是flex-wrap:nowrap 即不换行

      .container {
        flex-wrap: wrap;
      }

容器的对齐方式

7. 单行容器中的项目对齐方式

justify-content：控制所有项目在主轴上对齐方式，本质上是设置容器中的剩余空间在所有”项目之间”的分配方案。

.container {
        width: 300px;
        display: flex;
        /* justify-content: 控制所有项目在主轴上的对齐方式; */
        /* 本质是：设置容器中的剩余空间在所有 “项目之间”的分配方案 */
        /* 1. 容器剩余空间在所有项目“二边”的如何分配 ，将全部项目视为一个整体*/
        /* 从书写方向起始方向开始 */
        justify-content: flex-start;
        /* 从书写方向终止方向排列 */
        justify-content: flex-end;
        /* 单行居中排列 */
        justify-content: center;
        /* 2. 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
        /* 两端齐平父容器边界，中间剩余空间平均分布 */
        justify-content: space-between;
        /* 分散对齐: 剩余空间在所有项目二侧平均分配 */
        justify-content: space-around;
         /* 各元素两端都平均分布 ，瓜分剩余空间*/
        justify-content: space-evenly;
      }
      .container > .item {
        width: 60px;
      }

（1）容器剩余空间在所有项目两边是如何分配的,将全部项目看成一个整体
justify-content：flex-start；

justify-content：flex-end；

justify-content：center；

（2）容器剩余空间在所有项目之间是如何分配的,将项目看成一个个独立的个体

justify-content：space-between；(两端齐平父容器边界，中间剩余空间平均分布)

justify-content：space-around；（分散对齐：剩余空间在所有项目两侧平均分配）

justify-content：space-evently；（各元素两端都平均分布）

8.多行容器中的项目对齐方式

多行容器使用的是align-content

      .container {
        width: 300px;
        display: flex;
        /* 多行容器 */
        flex-wrap: wrap;
        height: 150px;
        /* align-content: 设置多行容器中的项目排列; */
/* 1. 容器剩余空间在所有项目“二边”的如何分配 ，将全部项目视为一个整体*/
        /* 默认样式 */
        align-content: stretch;
        /* (多行-全部子项作为一个整体 ，起始边开始排 */
        align-content: flex-start;
        /* 多行-全部子项作为一个整体 ，终止边开始排 */
        align-content: flex-end;
        /* 多行-全部子项作为一个整体 ，中间开始排 */
        align-content: center;
/* 2. 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
        /* 将`每行项目组`看成一个个独立的个体 */
        /* 两端齐平父容器上下边界，各行中间剩余空间平均分布 */
        align-content: space-between;
        /* 多行分散对齐：剩余空间在所有项目两侧平均分配 */
        align-content: space-around;
        /* 各行两端都平均分布 */
        align-content: space-evenly;
      }

（1）容器剩余空间在所有项目两边是如何分配的,将全部项目看成一个整体
align-content：strentch （默认值）

align-content：flex-start；(多行-全部子项作为一个整体，起始边开始排)

align-content：flex-end；(多行-全部子项作为一个整体，终止边开始排)

align-content：center；(多行-全部子项作为一个整体，中间开始排)

（2）容器剩余空间在所有项目之间是如何分配的,将每行项目组看成一个个独立的个体
align-content：space-between；(两端齐平父容器上下边界，各行中间剩余空间平均分布)

align-content：space-around；（多行分散对齐：剩余空间在所有项目两侧平均分配）

align-content：space-evently；（各行两端都平均分布）

9. 主轴为垂直方向时的项目排列

主轴方向：默认为行即flex-direction：row；

改变方向为垂直列的方向flex-direction：column；

(1)项目两边分配
justify-content：flex-start；(全部子项作为一个整体，起始边开始排)

justify-content：flex-end；(全部子项作为一个整体，终止边开始排)

justify-content：center；(全部子项作为一个整体，中间开始排)

(2)项目之间分配

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

10. 所有项目(items)在交叉轴(垂直于主轴)上的排列

项目在交叉轴上默认是自动伸缩的，默认值为align-items: stretch

align-items: flex-start;

align-items: flex-end;

align-items: center;

11.主轴方向与项目排列的简写

flex-direction: row;
flex-wrap: nowrap;
以上两个可以简写为：flex-flow: row nowrap，这是默认值，都可以不写
flex-flow: column wrap;

12. 导航（用flexbox容器实现）

      /* 初始化套路 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      a {
        /* 取消超链接的下划线 */
        text-decoration: none;
        color: bisque;
      }
      nav {
        height: 40px;
        background-color: green;
        padding: 0 50px;
        /* 转为弹性盒子布局 */
        display: flex;
      }
      nav a {
        /* 继承行高 */
        height: inherit;
        /* line-height和当前盒子高度一样就可以实现居中效果 */
        line-height: 40px;
        padding: 0 15px;
      }
      nav a:hover {
        background-color: red;
        /* 文本设置白色高光 */
        color: white;
      }
      /* 一般登录放到最右边 */
      nav a:last-of-type {
        /* 实现自动靠右，把剩余空间全部给最后的登录这个元素，它的margin自动计算把尽可能大的空间全部左边外边距 */
        margin-left: auto;
      }

13.控制项目顺序

order控制项目的顺序
每个项目的order默认是0，越大越往后排

<style>
    .container {
      width: 200px;
      height: 50px;
      display: flex;
    }
    span {
      width: 50px;
    }
    span:first-of-type {
      /* order默认为0，值越大顺序越靠后 */
      order: 1;
    }
    span:last-of-type {
      order: -1;
    }

小结

Flex弹性布局常用属性

属性	功能
display:flex	声明该容器为flex容器
flex-wrap	是否换行，是否转为多行容器，默认单行。warp参数为多行允许换行
justify-content	控制所有项目在主轴上的对齐方式（适用于单行），一种是容器剩余空间在所有项目两边是如何分配的,将全部项目看成一个整体，参数有flex-start; flex-end; center;另一种容器剩余空间在所有项目之间是如何分配的,将项目看成一个个独立的个体，参数有space-between; space-around; space-evenly;
align-content	控制多行容器中的项目对齐方式（适用于多行），默认参数是stretch;拉伸，其他参数同上
align-items	所有项目(items)在交叉轴(垂直于主轴)上的排列，参数同上
flex-direction	设置主轴方向，默认为row，另一个为column
flex-flow	flex-wrap flex-direction合并的简写。 flex-flow：row/column nowrap/wrap;