search

博客列表 >Flex属性实例

Flex属性实例

Haggi的糖果屋
Haggi的糖果屋原创
2020年06月26日 18:23:12590浏览

一、复习内容

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.       header,
  9.       footer,
  10.       aside,
  11.       main {
  12.         background-color: #dedede;
  13.       }
  15.       header,
  16.       footer {
  17.         height: 50px;
  18.       }
  20.       aside,
  21.       main {
  22.         min-height: 600px;
  23.       }
  24.       .wrap {
  25.         width: 1000px;
  26.         border: 1px solid #000000;
  27.         overflow: hidden;
  28.         margin: 10px auto;
  29.       }
  30.       aside {
  31.         width: 200px;
  32.         float: left;
  33.       }
  34.       main {
  35.         width: 790px;
  36.         float: right;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <header>页眉</header>
  42.     <div class="wrap">
  43.       <aside>侧边栏</aside>
  44.       <main>主题内容</main>
  45.     </div>
  46.     <header>页尾</header>
  47.   </body>
  48. </html>

运行图：

2.定位布局

  1.  <style>
  2.       header,
  3.       footer,
  4.       aside,
  5.       main {
  6.         background-color: #dedede;
  7.       }
  9.       header,
  10.       footer {
  11.         height: 50px;
  12.       }
  14.       aside,
  15.       main {
  16.         min-height: 600px;
  17.       }
  18.       .wrap {
  19.         width: 1000px;
  20.         border: 1px solid #000000;
  22.         margin: 10px auto;
  23.         /* 设置定位父级 */
  24.         position: relative;
  25.         min-height: 600px;
  26.       }
  28.       aside {
  29.         width: 200px;
  30.         position: absolute;
  31.         /* 代码简化 */
  32.         /* left: 0;
  33.         top: 0; */
  34.         min-height: inherit;
  35.       }
  36.       main {
  37.         width: 790px;
  38.         float: right;
  39.         position: absolute;
  40.         right: 0;
  41.         /* 代码简化 */
  42.         /* top: 0; */
  43.         min-height: inherit;
  44.       }

运行图：

二、多栏、多列显示

1.显示文章

  1. <div>
  2.       投入真金白银抢先布局 新能源车发展的底气来自这些“硬核”支撑12年过去了，邓承浩还记得2008年北京奥运会时，自己第一次在新闻中见到长安新能源车的场景。尽管目前新能源汽车市场仍处于恢复发展期，这位1986年出生的青年工程师依然坚信自己的判断：在建设汽车强国的征程中，新能源汽车将扮演愈来越重要的角色。今年以来，刺激汽车消费、助力产业升级早已成为社会各界关注的热门话题。在今年全国两会第二场“部长通道”中，工业和信息化部部长苗圩专门回答了关于新能源汽车发展的提问。他开出从供给侧、需求侧和使用侧三管齐下的药方，为新能源汽车发展“添柴加火”。
  3.     </div>

2.设置样式：

  1.  <style>
  2.       * {
  3.         padding: 0;
  4.         margin: 0;
  5.         box-sizing: border-box;
  6.       }
  7.       /* html {
  8.           font-size: 18px;
  9.           color: #555555;
  10.       } */
  11.       :root {
  12.         font-size: 18px;
  13.         color: #555555;
  14.       }
  16.       div {
  17.         border: 1px solid #000;
  18.         padding: 1rem;
  19.         width: 60rem;
  20.         margin: 30px auto;
  21.         column-count: 3;
  22.         column-width: auto;
  23.         /* rem 字体宽度 */
  24.         /* column-rule-style: solid;
  25.         column-rule-width: 1px;
  26.         column-rule-color: gray; */
  27.         /* 样式 */
  28.         column-rule: 1px solid lightgreen;
  29.       }
  30.     </style>

运行图：

3.布局页面

三、flex布局

1.将容器转为弹性盒子

  1. .container {
  2.       width: 300px;
  3.       /* 将容器转为弹性盒子 */
  4.       display: flex;
  5.     }

运行图：

2.设置子元素（弹性项目）

  1. .container > .item {
  2.       /* 弹性盒子的子元素为弹性项目,支持任何元素，类型变为行内块 */
  3.       /*flex: auto;*/
  4.        width: 50px;
  5.     }

运行图：

3.多行显示

  1.  .container {
  2.         /* 换行显示 */
  3.         flex-wrap: wrap;
  4.     }

运行图：

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.   </head>
  8.   <style>
  9.     .container {
  10.       width: 300px;
  11.       display: flex;
  12.       /* 控制所有项目在主轴上的对齐方式 
  13.         设置容器中的剩余空间在
  14.         项目之间
  15.         的分配方案*/
  16.       /* 1.在整体项目的两边进行分配 */
  17.       /* 左对齐 */
  18.       justify-content: flex-start;
  19.       /* 右对齐 */
  20.       justify-content: flex-end;
  21.       /* 居中 */
  22.       justify-content: center;
  24.       /* 在各个项目之间进行分配 */
  25.       /* 两端对齐 首尾元素不参与，其余项目左右分配剩余空间*/
  26.       justify-content: space-between;
  27.       /* 分散对齐 所有项目两端分配剩余空间，并且相等 */
  28.       justify-content: space-around;
  29.       /* 平均分配 */
  30.       justify-content: space-evenly;
  31.     }
  32.     .container > .item {
  33.       width: 60px;
  34.     }
  35.   </style>
  36.   <body>
  37.     <div class="container">
  38.       <div class="item">1</div>
  39.       <div class="item">2</div>
  40.       <div class="item">3</div>
  41.       <div class="item">3</div>
  42.     </div>
  43.   </body>
  44. </html>

a.在整体项目的两边进行分配

左对齐-运行图：

右对齐-运行图：

居中-运行图：

b.在各个项目之间进行分配

两端对齐

分散对齐

平均分配

5.多行容器的对齐方式

设置为多行容器
flex-wrap: wrap;

  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.   </head>
  8.   <style>
  9.     .container {
  10.       width: 300px;
  11.       display: flex;
  12.       /* 设置为多行容器 */
  13.       flex-wrap: wrap;
  14.       height: 150px;
  15.       /* 多行容器排列 */
  16.       /* stretch为默认值 */
  17.       align-content: stretch;
  18.       /* 1.在整体项目的两边进行分配 */
  19.       align-content: flex-start;
  21.       align-content: flex-end;
  23.       align-content: center;
  25.       /* 项目之间 */
  26.       align-content: space-between;
  27.       /* 分散对齐 所有项目两端分配剩余空间，并且相等 */
  28.       align-content: space-around;
  29.       /* 平均分配 */
  30.       align-content: space-evenly;
  31.     }
  32.     .container > .item {
  33.       width: 60px;
  34.     }
  35.   </style>
  36.   <body>
  37.     <div class="container">
  38.       <div class="item">1</div>
  39.       <div class="item">2</div>
  40.       <div class="item">3</div>
  41.       <div class="item">4</div>
  42.       <div class="item">5</div>
  43.       <div class="item">6</div>
  44.       <div class="item">7</div>
  45.       <div class="item">8</div>
  46.     </div>
  47.   </body>
  48. </html>

默认值:stretch

上对齐

下对齐

居中

两端对齐

分散对齐

平均分配

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: 150px;
  11.         display: flex;
  12.         /* 控制主轴方向，默认为行 */
  13.         flex-direction: column;
  15.         /* 1.在整体项目的两边进行分配 */
  16.         justify-content: flex-start;
  17.         justify-content: flex-end;
  18.         justify-content: center;
  19.         /* 项目之间 */
  20.         justify-content: space-between;
  21.         /* 分散对齐 所有项目两端分配剩余空间，并且相等 */
  22.         justify-content: space-around;
  23.         /* 平均分配 */
  24.         justify-content: space-evenly;
  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>

上对齐-运行图：

下对齐-运行图：

居中-运行图：

两端对齐

分散对齐

平均分配

7.项目在交叉抽上的排列

当主轴为行，项目默认在交叉轴上自动伸缩

  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.         align-items: stretch;
  14.         align-items: flex-start;
  15.         align-items: flex-end;
  16.         align-items: center;
  17.       }
  18.       .container > .item {
  19.         width: 60px;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="container">
  25.       <div class="item">1</div>
  26.       <div class="item">2</div>
  27.       <div class="item">3</div>
  28.     </div>
  29.   </body>
  30. </html>

默认值：strench

上对齐：

下对齐：

居中：

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

flex-direction: row; flex-wrap: nowrap;
等同于简写
flex-flow: row nowrap;

9.实战：利用flexbox快速做一个导航

  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.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       :root {
  14.         font-size: 20px;
  15.       }
  16.       a {
  17.         text-decoration: none;
  18.         color: #ccc;
  19.       }
  20.       nav,
  21.       footer {
  22.         height: 50px;
  23.         background-color: #333;
  24.         padding: 0 50px;
  25.         display: flex;
  26.       }
  28.       nav a,
  29.       footer {
  30.         height: inherit;
  31.         line-height: 50px;
  32.         padding: 0 15px;
  33.       }
  34.       nav a:hover {
  35.         background-color: lime;
  36.         color: white;
  37.       }
  38.       nav a:last-of-type {
  39.         margin-left: auto;
  40.       }
  42.       .container {
  43.         width: 900px;
  44.         display: flex;
  45.         margin: 10px auto;
  46.       }
  47.       .container > aside {
  48.         width: 300px;
  49.         background-color: mediumpurple;
  50.         height: 600px;
  51.       }
  52.       .container > main {
  53.         width: 780px;
  54.         background-color: mediumspringgreen;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <nav>
  60.       <a href="">首页</a>
  61.       <a href="">教学视频</a>
  62.       <a href="">社区问答</a>
  63.       <a href="">登录/注册</a>
  64.     </nav>
  65.     <div class="container">
  66.       <aside>左边</aside>
  67.       <main>中间</main>
  68.       <aside>右边</aside>
  69.     </div>
  70.     <footer>www.php.cn</footer>
  71.   </body>
  72. </html>

运行图：

10.order属性控制项目排列书序及实战案例

  1. <style>
  2.     .container {
  3.       width: 300px;
  5.       display: flex;
  6.     }
  7.     .container > .item {
  8.       width: 60px;
  9.     }
  10.     .container > .item:first-of-type {
  11.       order: 3;
  12.     }
  13.   </style>

运行图：

案列：

  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.   </head>
  8.   <style>
  9.     .container {
  10.       width: 300px;
  12.       display: flex;
  13.       flex-direction: column;
  14.     }
  15.     .container > .item {
  16.       border: 1px solid #000000;
  17.       padding: 10px;
  18.       display: flex;
  19.       position: relative;
  20.     }
  21.     .container > .item > div {
  22.       display: flex;
  23.     }
  24.   </style>
  25.   <body>
  26.     <div class="container">
  27.       <div class="item">
  28.         1
  29.         <div>
  30.           <button onclick="up(this)">up</button>
  31.           <button onclick="down(this)">down</button>
  32.         </div>
  33.       </div>
  34.       <div class="item">
  35.         2
  36.         <div>
  37.           <button onclick="up(this)">up</button>
  38.           <button onclick="down(this)">down</button>
  39.         </div>
  40.       </div>
  41.       <div class="item">
  42.         3
  43.         <div>
  44.           <button onclick="up(this)">up</button>
  45.           <button onclick="down(this)">down</button>
  46.         </div>
  47.       </div>
  48.     </div>
  49.   </body>
  50.   <script>
  51.     let up = (ele) => (ele.offsetParent.style.order -= 1);
  52.     let down = (ele) => (ele.offsetParent.style.order += 1);
  53.   </script>
  54. </html>

运行图：

上一条：Chapter5 表格与表单下一条：简述html文档结构及其三大通用属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多