search

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

FlexBox 弹性盒布局相关知识

忠于原味
忠于原味原创
2020年06月24日 11:03:05753浏览

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

  • 基于浮动的二列布局

  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.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       header,
  15.       footer,
  16.       aside,
  17.       main {
  18.         background-color: #dedede;
  19.       }
  20.       header,
  21.       footer {
  22.         height: 50px;
  23.       }
  24.       aside,
  25.       main {
  26.         min-height: 500px;
  27.       }
  28.       .wrap {
  29.         width: 1000px;
  30.         margin: 10px auto;
  31.         /* 防止父级塌陷 */
  32.         overflow: hidden;
  33.       }
  34.       aside {
  35.         width: 200px;
  36.         /* 左浮动 */
  37.         float: left;
  38.       }
  39.       main {
  40.         width: 790px;
  41.         /* 右浮动 */
  42.         float: right;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <header>页眉</header>
  48.     <div class="wrap">
  49.       <aside>侧边栏</aside>
  50.       <main>主体内容区</main>
  51.     </div>
  52.     <footer>页脚</footer>
  53.   </body>
  54. </html>

  • 基于定位的二列布局

  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.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       header,
  15.       footer,
  16.       aside,
  17.       main {
  18.         background-color: #dedede;
  19.       }
  20.       header,
  21.       footer {
  22.         height: 50px;
  23.       }
  24.       aside,
  25.       main {
  26.         min-height: 500px;
  27.       }
  28.       .wrap {
  29.         width: 1000px;
  30.         height: 500px;
  31.         margin: 10px auto;
  32.         /* 定位父级 */
  33.         position: relative;
  34.       }
  35.       aside {
  36.         width: 200px;
  37.         /* 定位 */
  38.         position: absolute;
  39.       }
  40.       main {
  41.         width: 790px;
  42.         /* 定位 */
  43.         position: absolute;
  44.         right: 0;
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <header>页眉</header>
  50.     <div class="wrap">
  51.       <aside>侧边栏</aside>
  52.       <main>主体内容区</main>
  53.     </div>
  54.     <footer>页脚</footer>
  55.   </body>
  56. </html>
  • 效果图：

内容的多栏/列显示

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

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

  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.         padding: 0px;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       header,
  16.       footer {
  17.         height: 40px;
  18.         background-color: lightblue;
  19.       }
  20.       .container {
  21.         width: 1000px;
  22.         height: 600px;
  23.         /* 中间部分水平居中，上下外边距10px */
  24.         margin: 10px auto;
  25.         /* border: 2px solid #000; */
  26.         /*分列显示： 分三列 */
  27.         column-count: 3;
  28.       }
  29.       aside {
  30.         min-height: 600px;
  31.         background-color: lightgreen;
  32.       }
  33.       main {
  34.         min-height: 600px;
  35.         background-color: lightsalmon;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <header>头部</header>
  41.     <div class="container">
  42.       <aside>左侧</aside>
  43.       <main>主体</main>
  44.       <aside>右侧</aside>
  45.     </div>
  46.     <footer>底部</footer>
  47.   </body>
  48. </html>
  • 效果图：

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>FlexBox弹性盒布局快速预览</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         /* 如果这个容器中的内容要使用flexbox布局,第一步就是必须将这个容器转为弹性盒子 */
  11.         /* 弹性容器 */
  12.         display: flex;
  13.       }
  14.       .container > .item {
  15.         /* 一旦将父元素转为弹性容器,内部的"子元素"就会自动成为:弹性项目 */
  16.         /* 不管这个项目之前时什么类型,统统转为"行内块" */
  17.         /* 行内:全部在一排显示 */
  18.         /* 块:可以设置宽和高 */
  19.         /* flex: auto;自动给弹性项目分配空间 */
  20.         flex: auto;
  21.         /* width: 60px;
  22.         height: 60px; */
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item">1</div>
  29.       <div class="item">2</div>
  30.       <div class="item">3</div>
  31.       <div class="item">4</div>
  32.       <div class="item">5</div>
  33.       <div class="item">6</div>
  34.     </div>
  35.   </body>
  36. </html>
  • 效果图：

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>FlexBox弹性盒多行容器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         /* 如果这个容器中的内容要使用flexbox布局,第一步就是必须将这个容器转为弹性盒子 */
  11.         /* 弹性容器 */
  12.         display: flex;
  13.         /* 换行显示 默认:nowrap*/
  14.         flex-wrap: wrap;
  15.       }
  16.       .container > .item {
  17.         width: 150px;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="container">
  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>
  30. </html>
  • 效果图：

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

  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.         display: flex;
  11.         /* justify-content: 控制所有项目在主轴上的对齐方式 */
  12.         /* 本质:设置容器中的剩余空间在所有"项目之间"的分配方案 */
  13.         /* 1.容器剩余空间在所有项目"两边"的如何分配,将全部项目视为一个整体 */
  14.         justify-content: flex-start;
  15.         justify-content: flex-end;
  16.         justify-content: center;
  17.         /* 2.容器剩余空间在所有项目"之间"的如何分配,将项目视为一个独立的个体 */
  18.         /* 两端对齐 */
  19.         justify-content: space-between;
  20.         /* 分散对齐：剩余空间在所有项目两侧平均分配 */
  21.         justify-content: space-around;
  22.         /* 平均对齐 */
  23.         justify-content: space-evenly;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">1</div>
  30.       <div class="item">2</div>
  31.       <div class="item">3</div>
  32.     </div>
  33.   </body>
  34. </html>
  • 效果图：

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

  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.         /* 弹性布局 */
  11.         display: flex;
  12.         /* 多行容器 */
  13.         flex-wrap: wrap;
  14.         height: 150px;
  15.         /* align-content: 设置多行容器中的项目排列; */
  16.         /* 1.容器剩余空间在所有项目"两边"的如何分配,将全部项目视为一个整体 */
  17.         /* 默认值，轴线占满整个交叉轴 */
  18.         align-content: stretch;
  19.         align-content: flex-start;
  20.         align-content: flex-end;
  21.         align-content: center;
  22.         /* 2.容器剩余空间在所有项目"之间"的如何分配,将项目视为一个独立的个体 */
  23.         /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
  24.         align-content: space-between;
  25.         /* 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 */
  26.         align-content: space-around;
  27.         /* 平均对齐 */
  28.         align-content: space-evenly;
  29.       }
  30.       .container > .item {
  31.         width: 60px;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">1</div>
  38.       <div class="item">2</div>
  39.       <div class="item">3</div>
  40.       <div class="item">4</div>
  41.       <div class="item">5</div>
  42.       <div class="item">6</div>
  43.       <div class="item">7</div>
  44.       <div class="item">8</div>
  45.     </div>
  46.   </body>
  47. </html>
  • 效果图：

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

  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.         /* 弹性布局 */
  12.         display: flex;
  13.         /* 主轴方向：默认为行方向 */
  14.         flex-direction: row;
  15.         /* 主轴方向：列方向  */
  16.         flex-direction: column;
  18.         /* 项目两边分配剩余空间 （全部项目视为一个整体）*/
  19.         justify-content: flex-start;
  20.         justify-content: flex-end;
  21.         justify-content: center;
  22.         /* 项目之间分配剩余空间（每个项目都视为一个独立的个体） */
  23.         justify-content: space-between;
  24.         justify-content: space-around;
  25.         justify-content: space-between;
  26.         justify-content: space-evenly;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <div class="item">2</div>
  34.       <div class="item">3</div>
  35.     </div>
  36.   </body>
  37. </html>
  • 效果图：

项目在交叉轴上的排列

  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: 200px;
  11.         display: flex;
  12.         /* 项目在交叉轴上默认是自动伸缩的 align-items: stretch;默认值 */
  13.         align-items: stretch;
  15.         align-items: flex-start;
  16.         align-items: flex-end;
  17.         align-items: center;
  18.       }
  19.       .container > .item {
  20.         width: 60px;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="container">
  26.       <div class="item">1</div>
  27.       <div class="item">2</div>
  28.       <div class="item">3</div>
  29.     </div>
  30.   </body>
  31. </html>
  • 效果图：

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

  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: 50px;
  11.         display: flex;
  12.         /* 默认值不用写 */
  13.         /* 主轴方向：默认为行行方向 */
  14.         /* flex-direction: row; */
  15.         /* 默认:禁止换行 */
  16.         /* flex-wrap: nowrap; */
  17.         /* 简写 */
  18.         /* flex-flow: row nowrap; */
  19.         /* 主轴为列方向，多行排列 */
  20.         flex-flow: column wrap;
  21.       }
  22.       .container > .item {
  23.         width: 70px;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">1</div>
  30.       <div class="item">2</div>
  31.       <div class="item">3</div>
  32.       <div class="item">4</div>
  33.       <div class="item">5</div>
  34.     </div>
  35.   </body>
  36. </html>
  • 效果图：

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

  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>Flex容器实战：快速撸一个主导航</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: #ccc;
  17.       }
  19.       nav {
  20.         height: 40px;
  21.         background-color: #333;
  22.         padding: 0 50px;
  23.         /* 转为弹性盒布局 */
  24.         display: flex;
  25.       }
  27.       nav a {
  28.         /* 继承父级高度； */
  29.         height: inherit;
  30.         line-height: 40px;
  31.         padding: 0 15px;
  32.       }
  33.       /* 鼠标悬停效果 */
  34.       a:hover {
  35.         background-color: seagreen;
  36.         color: white;
  37.       }
  38.       /* 登录/注册放在最右边 */
  39.       nav a:last-of-type {
  40.         /* 左外边距自动分配 */
  41.         margin-left: auto;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <header>
  47.       <nav>
  48.         <a href="">首页</a>
  49.         <a href="">教学视频</a>
  50.         <a href="">社区问答</a>
  51.         <a href="">资源下载</a>
  52.         <a href="">登录/注册</a>
  53.       </nav>
  54.     </header>
  55.   </body>
  56. </html>
  • 效果图：

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

  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.     <style>
  8.       .container {
  9.         width: 300px;
  10.         /* 弹性布局 */
  11.         display: flex;
  12.       }
  13.       .container > .item {
  14.         width: 60px;
  15.       }
  16.       .container > .item:first-of-type {
  17.         /* order: 默认是0，越大越往后排; */
  18.         order: 3;
  19.       }
  20.       .container > .item:last-of-type {
  21.         order: 1;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div class="container">
  27.       <div class="item">1</div>
  28.       <div class="item">2</div>
  29.       <div class="item">3</div>
  30.     </div>
  31.   </body>
  32. </html>
  • 效果图：

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

  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.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       .container {
  15.         width: 300px;
  16.         /* 转为弹性布局 */
  17.         display: flex;
  18.         /* 主轴方向：列方向 */
  19.         flex-direction: column;
  20.       }
  21.       .container > .item {
  22.         border: 1px solid #000;
  23.         padding: 10px;
  24.         display: flex;
  25.         /* 设为定位父级，便于后面使用JS找到父级设置其order值 */
  26.         position: relative;
  27.       }
  28.       /* 包裹按钮的div转为弹性盒 */
  29.       .container > .item > div {
  30.         display: flex;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">
  37.         imges-1.jpg
  38.         <div>
  39.           <button onclick="up(this)">Up</button
  40.           ><button onclick="down(this)">Down</button>
  41.         </div>
  42.       </div>
  43.       <div class="item">
  44.         imges-2.jpg
  45.         <div>
  46.           <button onclick="up(this)">Up</button
  47.           ><button onclick="down(this)">Down</button>
  48.         </div>
  49.       </div>
  50.       <div class="item">
  51.         imges-3.jpg
  52.         <div>
  53.           <button onclick="up(this)">Up</button
  54.           ><button onclick="down(this)">Down</button>
  55.         </div>
  56.       </div>
  57.     </div>
  58.   </body>
  59.   <script>
  60.     let up = (ele) => (ele.offsetParent.style.order -= 1);
  61.     let down = (ele) => (ele.offsetParent.style.order += 1);
  62.   </script>
  63. </html>
  • 效果图：
上一条：Laravel框架实战核心知识点下一条：元素大小重新计算
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多