search

博客列表 >Flex布局

Flex布局

Blueprint
Blueprint原创
2020年06月24日 12:34:02735浏览

复习

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.       /* 设置页眉,页脚,边栏和内容区域的背景色 */
  9.       header,
  10.       footer,
  11.       aside,
  12.       main {
  13.         background-color: #dedede;
  14.       }
  15.       /* 设置设置页脚、页眉的固定高度 */
  16.       header,
  17.       footer {
  18.         height: 50px;
  19.       }
  21.       /* 设置边栏和内容的最小高度 */
  22.       aside,
  23.       main {
  24.         min-height: 700px;
  25.       }
  27.       .wrap {
  28.         /* 设置主体容器的宽度 */
  29.         width: 1000px;
  31.         /* 设置主体容器的边框样式 */
  32.         border: 1px solid #000;
  34.         /* BFC清除浮动的影响 */
  35.         overflow: hidden;
  37.         /* 主体容器的上下外边距 和左右居中*/
  38.         margin: 10px auto;
  39.       }
  41.       aside {
  42.         /* 边栏宽度 */
  43.         width: 200px;
  45.         /*向左浮动  */
  46.         float: left;
  47.       }
  48.       main {
  49.         /* 内容区的宽度 */
  50.         width: 790px;
  52.         /* 向右浮动 */
  53.         float: right;
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <header>页眉</header>
  59.     <div class="wrap">
  60.       <aside>边栏</aside>
  61.       <main>内容区</main>
  62.     </div>
  63.     <footer>页脚</footer>
  64.   </body>
  65. </html>

效果图:

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>基于定位的二列布局</title>
  7.     <style>
  8.       /* 设置设置页脚、页眉的固定高度 */
  10.       header,
  11.       footer,
  12.       aside,
  13.       main {
  14.         background-color: #dedede;
  15.       }
  16.       /* 设置边栏和内容的最小高度 */
  18.       header,
  19.       footer {
  20.         height: 50px;
  21.       }
  23.       aside,
  24.       main {
  25.         min-height: 700px;
  26.       }
  28.       .wrap {
  29.         /* 设置主体容器的宽度 */
  30.         width: 1000px;
  32.         /* 设置主体容器的边框样式 */
  33.         border: 1px solid #000;
  35.         /* 设置主体容器的最小高度 */
  36.         min-height: 700px;
  38.         /* 主体容器的上下外边距和左右居中 */
  39.         margin: 10px auto;
  41.         /* 设置相对定位,给子元素提供绝对定位的参照物 */
  42.         position: relative;
  44.         /* 默认属性可省略 */
  45.         left: 0;
  46.       }
  48.       aside {
  49.         /* 边栏宽度 */
  50.         width: 200px;
  52.         /* 最小高度继承父容器 */
  53.         min-height: inherit;
  55.         /* 绝对定位 */
  56.         position: absolute;
  57.       }
  58.       main {
  59.         /* 内容区的宽度 */
  60.         width: 790px;
  62.         /* 最小高度继承父容器 */
  63.         min-height: inherit;
  65.         /* 绝对定位 */
  66.         position: absolute;
  68.         /* 定位属性 */
  69.         right: 0;
  70.       }
  71.     </style>
  72.   </head>
  73.   <body>
  74.     <header>页眉</header>
  75.     <div class="wrap">
  76.       <aside>侧边栏</aside>
  77.       <main>主体内容区</main>
  78.     </div>
  79.     <footer>页脚</footer>
  80.   </body>
  81. </html>

效果图:

3.内容的多栏/列显示

  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.         /* 内边距清零 */
  11.         padding: 0;
  13.         /* 外边距清零 */
  14.         margin: 0;
  16.         /* 盒模型的内减模式 */
  17.         box-sizing: border-box;
  18.       }
  19.       /* 设置html更元素的字体大小和颜色 */
  20.       :root {
  21.         font-size: 16px;
  22.         color: #555;
  23.       }
  25.       div {
  26.         /* 容器的边框样式 */
  27.         border: 1px solid #000;
  29.         /* 容器的内边距,rem为根元素字体单位 */
  30.         padding: 1rem;
  32.         /* 宽度 */
  33.         width: 60rem;
  35.         /* 容器的左右外边距和水平居中显示 */
  36.         margin: 30px auto;
  37.       }
  39.       div {
  40.         /* 
  41.         分栏显示 
  42.         列数和列宽设置多个
  43.         以css属性覆盖规则显示
  44.         */
  45.         column-count: 3; /* 分栏列数*/
  46.         /* 分栏的列宽*/
  47.         columns: 10rem;
  49.         /* 
  50.         column-rule-style:分栏线的粗细
  51.         column-rule-width:分栏线的宽度
  52.         column-rule-color:分栏线的颜色
  53.          */
  55.         /* 多属性的简写 */
  56.         column-rule: 10px solid #eee;
  57.       }
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <div>
  62.       6月11日以来，北京连续出现新增疫情，应急响应等级调整至二级，疫情防控形势严峻复杂。不少此前计划小长假外出的人们被迫放弃了计划。
  63.       端午大家还愿意出门吗？哪些出游方式是主流？飞猪报告显示，今年端午除京津冀地区外，全国各地周边游需求较高，整体出游人次已恢复到去年六成，京津冀地区约恢复到去年四成左右。由于假期天数短，整体出游积极性不及五一。
  64.       携程发布的《端午小长假旅游市场展望报告》指出，除北京等特殊地区外，端午小长假期间人们的出行、休闲需求依然存在，旅游市场的复苏基本面仍在。但相比前一阶段，人们的出行决策显然更加谨慎。
  65.       其中，上海、广州、深圳、成都、杭州、重庆、南京、西安在最热出发地与最热目的地中皆名列前茅。三亚—上海、成都—上海、上海—重庆、上海—三亚、上海—成都是端午期间最热门的航线。
  66.       火车票的预定数据显示，深圳—广州、上海—杭州、上海—南京、深圳—长沙、深圳—汕头、重庆—成都的预定热度排名最前。
  67.       此外，飞猪报告显示，端午出游积极的前十大城市分别为：上海、杭州、南京、广州、长沙、深圳、成都、三亚、重庆、厦门。
  68.       热门景区方面，携程报告显示，上海迪士尼度假区、珠海长隆海洋王国、中华恐龙园、上海海昌海洋公园、茶卡盐湖等高品质景区，是今年端午小长假期间游客们喜爱的热门景区。
  69.     </div>
  70.   </body>
  71. </html>

FlexBox弹性盒快速预览

  1.    <style>
  2.      .container {
  3.        width: 300px;
  5.        /* 如果这个容器中的内容要使用flexBox布局， 第一步就是必须将这个容器转为弹性盒子 */
  6.        /* 弹性容器 */
  7.        display: flex;
  8.      }
  9.      .container > .item {
  10.        /* 一旦将父元素转为弹性容器，内部的“子元素”就会自动成为： 弹性项目 */
  11.        /* 不管这个项目标签之前是什么类型，统统转为“行内块” */
  12.        /* 行内：全部在一排显示 */
  13.        /* 块：　可以设置宽和高 */
  15.        /* flex: auto; */
  16.        width: 60px;
  17.        height: 60px;
  18.      }
  19.    </style>
  21.  <body>
  22.    <div class="container">
  23.      <div class="item">1</div>
  24.      <span class="item">2</span>
  25.      <a class="item">3</a>
  26.      <a class="item">4</a>
  27.    </div>
  28.  </body>

FlexBox弹性盒多行容器

属性:flex-wrap

  1. flex-wrap: nowrap;(默认)
  • 项目换行显示

2.flex-wrap: nowrap;

  • 项目不换行显示

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

属性:jsutify-content(项目属性)
1.justify-content: flex-start

  • 项目以主轴起始方向开始排列

2.justify-conetn: flex-end;

  • 项目以主轴结束方向排列

3.justify-content:center

  • 项目在主轴上居中显示

4.justify-content: space-between;

  • 相邻项目之间均分剩余空间

5.justify-content: space-around;

  • 项目周围均分剩余空间

6.justify-content: space-evenly;

  • 项目之间均分剩余空间

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

属性: align-content(项目属性)

1.align-content: stretch;

  • 项目整体拉伸适应大小

    2.align-content: flex-start;
  • 项目整体以交叉轴的起始方向排列

    3.align-content: flex-end
  • 项目整体以交叉轴的终止方向排列

    4.align-content: center;
  • 项目整体在交叉轴上居中排列

5.align-content: space-between;

  • 相邻的项目整体之间均分交叉轴上的剩余空间

6.align-content: space-around;

  • 项目整体周围均分交叉轴上的剩余空间

    7.align-content: space-evenly;
  • 项目整体之间均分交叉轴上的剩余空间

项目在交叉轴上的排列

属性:align-items(项目属性)
1.align-items: stretch(默认属性)

  • 项目在交叉轴上拉伸适应容器大小

    2.align-items: flex-start;
  • 项目在交叉轴的起始位置上

3.align-items: flex-end;

  • 项目怎交叉在的终止位置上

    4.align-items: center;
  • 项目在交叉轴上居中显示

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

属性: flex-flow

flex-direction和flex-wrap属性的简写方式

  1. .box{
  2. flex-flow: column wrap;
  3. }
  4. /*等同于*/
  5. .box{
  6. flex-direction: column;
  7. flex-wrap: wrap;
  8. }

flex布局实现一个导航栏

  1. <style>
  2.   /* 初始化操作 */
  3.   * {
  4.     padding: 0;
  5.     margin: 0;
  6.     box-sizing: border-box;
  7.   }
  8.   /* 去除a标签的样式 */
  9.   a {
  10.     text-decoration: none;
  11.     color: #ccc;
  12.   }
  13.   /* 导航栏的高度、背景]内边距 */
  14.   nav {
  15.     height: 40px;
  16.     background-color: #333;
  17.     padding: 0 50px;
  18.     /* 声明flex容器 */
  19.     display: flex;
  20.   }
  21.   /* a链接的高度、行高和内边距 */
  22.   nav a {
  23.     height: inherit;
  24.     line-height: 40px;
  25.     padding: 0 15px;
  26.   }
  27.   /* 最后一个a标签的位置 */
  28.   nav a:last-child {
  29.     /* auto最大限度的占用多余空间 */
  30.     margin-left: auto;
  31.   }
  32.   /* 鼠标悬浮时a链接的样式 */
  33.   nav a:hover {
  34.     background-color: #444;
  35.     color: white;
  36.   }
  37. </style>
  38. <body>
  39.   <nav>
  40.     <a href="">LOGO</a>
  41.     <a href="">首页</a>
  42.     <a href="">博客</a>
  43.     <a href="">学院</a>
  44.     <a href="">下载</a>
  45.     <a href="">论坛</a>
  46.     <a href="">登录/注册</a>
  47.   </nav>
  48. </body>

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

属性: order(项目属性)

  • 默认值为0
  • 值越小优先级越高
  • 可以为负数
  1.  <style>
  2.    /* 项目的共同样式 */
  3.    .item {
  4.      width: 60px;
  5.      background-color: #ccc;
  6.    }
  7.    .wrap {
  8.      width: 300px;
  9.      /* 声明容器 */
  10.      display: flex;
  11.    }
  12.    .item:first-child{
  13.    /* 降低排序优先级 */
  14.      order: 5;
  15.    }
  16.    .item:last-child{
  17.      /* 提示排序优先级 */
  18.      order: -1;
  19.    }
  20.  </style>
  21.  <body>
  22.    <div class="wrap">
  23.      <div class="item">1</div>
  24.      <div class="item">2</div>
  25.      <div class="item">3</div>
  26.      <div class="item">4</div>
  27.      <div class="item">5</div>
  28.    </div>
  29.  </body>

order小案例

  1.   <style>
  2.     /* 项目的共同样式 */
  3.     .item {
  4.       width: 400px;
  5.       height: 40px;
  7.       /* 行高 */
  8.       line-height: 40px;
  9.       margin: 5px 0;
  11.       /* 边框 */
  12.       border: 1px solid;
  13.       text-align: center;
  15.       /* 圆角 */
  16.       border-radius: 10px;
  18.       /* 给js提供定位父级 */
  19.       position: relative;
  20.     }
  22.     .container {
  23.       /* 声明flex容器 */
  24.       display: flex;
  26.       /* 主轴方向和不换行 */
  27.       flex-flow: column nowrap;
  29.       /* 项目在交叉轴上居中显示 */
  30.       align-items: center;
  31.     }
  32.   </style>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item">
  36.         第一栏
  37.         <button onclick="up(this)">Up</button>
  38.         <button onclick="down(this)">Down</button>
  39.       </div>
  41.       <div class="item">
  42.         第二栏
  43.         <button onclick="up(this)">Up</button>
  44.         <button onclick="down(this)">Down</button>
  45.       </div>
  47.       <div class="item">
  48.         第三栏
  49.         <button onclick="up(this)">Up</button>
  50.         <button onclick="down(this)">Down</button>
  51.       </div>
  53.       <div class="item">
  54.         第四栏
  55.         <button onclick="up(this)">Up</button>
  56.         <button onclick="down(this)">Down</button>
  57.       </div>
  58.     </div>
  59.   </body>
  60.   <script>
  61.     //offsetParent 获取定位父级
  62.     let up = (ele) => (ele.offsetParent.style.order -= 1);
  63.     let down = (ele) => (ele.offsetParent.style.order += 1);
  64.   </script>

上一条：前端 - JS - DOM操作和事件处理下一条：Laravel框架实战核心知识点
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多