FlexBox 弹性盒布局相关知识 - 12期学习

首页 > 博客列表 > FlexBox 弹性盒布局相关知识

博主信息

博文 13

粉丝 0

访问量 14642

专题推荐

更多>

基于浮动和定位的二列布局(复习)

基于浮动的二列布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基于浮动的二列布局</title>
    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      header,
      footer,
      aside,
      main {
        background-color: #dedede;
      }
      header,
      footer {
        height: 50px;
      }
      aside,
      main {
        min-height: 500px;
      }
      .wrap {
        width: 1000px;
        margin: 10px auto;
        /* 防止父级塌陷 */
        overflow: hidden;
      }
      aside {
        width: 200px;
        /* 左浮动 */
        float: left;
      }
      main {
        width: 790px;
        /* 右浮动 */
        float: right;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <div class="wrap">
      <aside>侧边栏</aside>
      <main>主体内容区</main>
    </div>
    <footer>页脚</footer>
  </body>
</html>

基于定位的二列布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基于定位的二列布局</title>
    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      header,
      footer,
      aside,
      main {
        background-color: #dedede;
      }
      header,
      footer {
        height: 50px;
      }
      aside,
      main {
        min-height: 500px;
      }
      .wrap {
        width: 1000px;
        height: 500px;
        margin: 10px auto;
        /* 定位父级 */
        position: relative;
      }
      aside {
        width: 200px;
        /* 定位 */
        position: absolute;
      }
      main {
        width: 790px;
        /* 定位 */
        position: absolute;
        right: 0;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <div class="wrap">
      <aside>侧边栏</aside>
      <main>主体内容区</main>
    </div>
    <footer>页脚</footer>
  </body>
</html>

效果图：

内容的多栏/列显示

<!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;
        /* rem表示相对默认字体的倍数,这里的1rem就是本页面font-size: 16px;的一倍，1rem即16px,2rem即32px */
        padding: 1rem;
        width: 60rem;
        margin: 30px auto;
      }
      div {
        /* 分列显示 */
        /*
       column-count:表示分几列显示，
       column-width:表示每列的宽度，
       这两个属性可以只设置其中一个，另外一个属性取值为auto,
       若要同时设置，则按CSS层叠样式规则显示
      */
        column-count: 3;
        /* column-width: auto; */
        /* 设置分割线的粗细 */
        /* column-rule-width: 2px; */
        /* 设置分割线的线条样式 */
        /* column-rule-style: solid; */
        /* 设置分割线的颜色 */
        /* column-rule-color: blue; */
        /* 简写 */
        column-rule: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div>
      毒祸一日不息，禁毒一刻不止。五年来，从“百城禁毒会战”到“禁毒两打两控”，一个个禁毒专项行动深入开展，以“端制毒窝点、打贩毒团伙、控吸毒群体”为重点，全国公安机关打击毒品犯罪战果逐年提升。
      斩断毒品出境入境通道——14个省份联合开展“净边”行动，强化边境双向堵截，缴获毒品13.5吨、制毒物品3200多吨，有效遏制了毒品入境内流和制毒物品入滇出境。
      遏制国内制毒猖獗势头——组织制毒和制贩制毒物品重点地区联合开展专项行动，实现国内制毒活动大幅萎缩，国内制毒来源占缴毒总量的比例降至不到20%。
      打击网上涉毒嚣张气焰——集中开展网络扫毒专项行动，共侦破网络涉毒案件2.9万起，抓获违法犯罪嫌疑人3.9万余名，缴获毒品12吨，关停取缔涉毒网站960个。
      猛药去疴，禁毒重点整治是解决突出毒品问题的良方。
      国家禁毒委先后部署对119个毒品问题严重的县（市、区）进行重点整治，已有88个地区毒品问题严重的状况得到扭转。
      同舟共济，禁毒国际合作是人类应对毒品问题的关键。
    </div>
  </body>
</html>

效果图

用 column-count 属性做个三列布局：

<!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: 0px;
        margin: 0;
        box-sizing: border-box;
      }
      header,
      footer {
        height: 40px;
        background-color: lightblue;
      }
      .container {
        width: 1000px;
        height: 600px;
        /* 中间部分水平居中，上下外边距10px */
        margin: 10px auto;
        /* border: 2px solid #000; */
        /*分列显示： 分三列 */
        column-count: 3;
      }
      aside {
        min-height: 600px;
        background-color: lightgreen;
      }
      main {
        min-height: 600px;
        background-color: lightsalmon;
      }
    </style>
  </head>
  <body>
    <header>头部</header>
    <div class="container">
      <aside>左侧</aside>
      <main>主体</main>
      <aside>右侧</aside>
    </div>
    <footer>底部</footer>
  </body>
</html>

效果图：

FlexBox 弹性盒布局快速预览

<!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;自动给弹性项目分配空间 */
        flex: auto;
        /* width: 60px;
        height: 60px; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </body>
</html>

效果图：

FlexBox 弹性盒多行容器

<!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;
        /* 换行显示 默认:nowrap*/
        flex-wrap: wrap;
      }
      .container > .item {
        width: 150px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>

效果图：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单行容器中的项目对齐方式</title>
    <style>
      .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;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

效果图：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多行容器中的项目对齐方式</title>
    <style>
      .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;
      }
      .container > .item {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>
  </body>
</html>

效果图：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴为垂直方向的项目排列</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
        /* 弹性布局 */
        display: flex;
        /* 主轴方向：默认为行方向 */
        flex-direction: row;
        /* 主轴方向：列方向  */
        flex-direction: column;
        /* 项目两边分配剩余空间 （全部项目视为一个整体）*/
        justify-content: flex-start;
        justify-content: flex-end;
        justify-content: center;
        /* 项目之间分配剩余空间（每个项目都视为一个独立的个体） */
        justify-content: space-between;
        justify-content: space-around;
        justify-content: space-between;
        justify-content: space-evenly;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

效果图：

项目在交叉轴上的排列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目在交叉轴上的排列</title>
    <style>
      .container {
        width: 300px;
        height: 200px;
        display: flex;
        /* 项目在交叉轴上默认是自动伸缩的 align-items: stretch;默认值 */
        align-items: stretch;
        align-items: flex-start;
        align-items: flex-end;
        align-items: center;
      }
      .container > .item {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

效果图：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴方向与项目排列的简写</title>
    <style>
      .container {
        width: 300px;
        height: 50px;
        display: flex;
        /* 默认值不用写 */
        /* 主轴方向：默认为行行方向 */
        /* flex-direction: row; */
        /* 默认:禁止换行 */
        /* flex-wrap: nowrap; */
        /* 简写 */
        /* flex-flow: row nowrap; */
        /* 主轴为列方向，多行排列 */
        flex-flow: column wrap;
      }
      .container > .item {
        width: 70px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>

效果图：

Flex 容器实战：快速撸一个主导航

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex容器实战：快速撸一个主导航</title>
    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: #ccc;
      }
      nav {
        height: 40px;
        background-color: #333;
        padding: 0 50px;
        /* 转为弹性盒布局 */
        display: flex;
      }
      nav a {
        /* 继承父级高度； */
        height: inherit;
        line-height: 40px;
        padding: 0 15px;
      }
      /* 鼠标悬停效果 */
      a:hover {
        background-color: seagreen;
        color: white;
      }
      /* 登录/注册放在最右边 */
      nav a:last-of-type {
        /* 左外边距自动分配 */
        margin-left: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <a href="">首页</a>
        <a href="">教学视频</a>
        <a href="">社区问答</a>
        <a href="">资源下载</a>
        <a href="">登录/注册</a>
      </nav>
    </header>
  </body>
</html>

效果图：

项目属性：order控制项目顺序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目属性：order控制项目顺序</title>
    <style>
      .container {
        width: 300px;
        /* 弹性布局 */
        display: flex;
      }
      .container > .item {
        width: 60px;
      }
      .container > .item:first-of-type {
        /* order: 默认是0，越大越往后排; */
        order: 3;
      }
      .container > .item:last-of-type {
        order: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

效果图：

order小案例，调整元素顺序，比如小相册

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>order小案例，调整元素顺序，比如小相册</title>
    <style>
      /* 初始化 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .container {
        width: 300px;
        /* 转为弹性布局 */
        display: flex;
        /* 主轴方向：列方向 */
        flex-direction: column;
      }
      .container > .item {
        border: 1px solid #000;
        padding: 10px;
        display: flex;
        /* 设为定位父级，便于后面使用JS找到父级设置其order值 */
        position: relative;
      }
      /* 包裹按钮的div转为弹性盒 */
      .container > .item > div {
        display: flex;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
        imges-1.jpg
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
      <div class="item">
        imges-2.jpg
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
      <div class="item">
        imges-3.jpg
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
    </div>
  </body>
  <script>
    let up = (ele) => (ele.offsetParent.style.order -= 1);
    let down = (ele) => (ele.offsetParent.style.order += 1);
  </script>
</html>

效果图：

批改老师：

天蓬老师

批改状态：合格

老师批语：认真, 舒服, 继续

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php服务器环境、Visual Studio Code编辑器配置、markdown语法初体验

2020-06-11 13:52:12