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

Community

Learn

Tools Library

AI Tools

Leisure

English

Home > List of blog posts > FlexBox 弹性盒布局相关知识

Blogger Information

Blog 13

fans 0

comment 0

visits 11255

Special Recommendation

More>

Related recommendations

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

基于浮动的二列布局

<!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>

效果图：

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：认真, 舒服, 继续

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

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

2020-06-11 13:52:12