search

博客列表 >flex容器中的四个属性的功能，参数，以及作用

flex容器中的四个属性的功能，参数，以及作用

愿情的博客
愿情的博客原创
2021年03月26日 13:35:39599浏览

1

1.容器container

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性flex容器与项目</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       .container {
  19.         /* 转为flex布局，这个元素就叫flex/弹性容器 */
  20.         display: flex;
  21.         height: 20em;
  22.         border: 1px solid black;
  23.       }
  24.       /* 项目样式：必须是flex容器得子元素 */
  25.       /* flex容器中得子元素自动生成flex容器的项目，并且是行内块显示 */
  26.       .container > .item {
  27.         padding: 1rem;
  28.         background-color: lightcyan;
  29.         border: 1px solid black;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item">item1</div>
  36.       <div class="item">item2</div>
  37.       <div class="item">item3</div>
  38.     </div>
  39.   </body>
  40. </html>

2.弹性项目在主轴上的排列方式

1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性项目在主轴上的排列方式</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       .container {
  19.         /* 转为flex布局，这个元素就叫flex/弹性容器 */
  20.         display: flex;
  21.         /* height: 20em; */
  22.         height: 100vh;
  23.         border: 1px solid black;
  24.       }
  25.       /* 项目样式：必须是flex容器得子元素 */
  26.       /* flex容器中得子元素自动生成flex容器的项目，并且是行内块显示 */
  27.       .container > .item {
  28.         /* padding: 1rem; */
  29.         /* width: 10rem; */
  30.         /* height: 5rem; */
  31.         background-color: lightcyan;
  32.         border: 1px solid black;
  33.       }
  34.       /* 1.单行容器 */
  35.       .container {
  36.         /* 主轴方向：默认水平，行 */
  37.         /* flex-direction: row; */
  38.         /* 禁止换行 */
  39.         /* flex-wrap: nowrap; */
  40.         /* 简化 */
  41.         /* flex-flow: 主轴方向 是否换行 */
  42.         /* 手机端常用的方式 */
  43.         flex-flow: row nowrap;
  44.       }
  45.       /* 2多行容器 */
  46.       .container {
  47.         /* 允许换行 */
  48.         /* flex-flow: row wrap; */
  50.         /* 主轴垂直 */
  51.         /* flex-flow: column nowrap; */
  52.         flex-flow: column wrap;
  53.       }
  54.       .container .item:nth-of-type(1) .container .item:nth-of-type(3) {
  55.         height: 8vh;
  56.       }
  57.       .container .item:nth-of-type(2) {
  58.         height: 84vh;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div class="container">
  64.       <div class="item">item1</div>
  65.       <div class="item">item2</div>
  66.       <div class="item">item3</div>
  67.       <!-- <div class="item">item4</div>
  68.       <div class="item">item5</div>
  69.       <div class="item">item6</div>
  70.       <div class="item">item7</div>
  71.       <div class="item">item8</div> -->
  72.     </div>
  73.   </body>
  74. </html>

3.弹性项目在主轴和交叉轴上的对齐

1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性项目在主轴和交叉轴上的对齐</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       .container {
  19.         /* 转为flex布局，这个元素就叫flex/弹性容器 */
  20.         display: flex;
  21.         height: 20em;
  23.         border: 1px solid black;
  24.       }
  25.       /* 项目样式：必须是flex容器得子元素 */
  27.       .container > .item {
  28.         width: 10rem;
  29.         height: 5rem;
  30.         background-color: lightcyan;
  31.         border: 1px solid black;
  32.       }
  33.       /* 设置项目在主轴的对齐方式的前提是：主轴上存在剩余空间 */
  34.       .container {
  35.         flex-flow: row nowrap;
  36.         /* 一。项目在主轴的对齐方式 ：justify-conten*/
  37.         /* 1.将所有项目看成一个整体来处理 ,向左，向右，居中对齐*/
  38.         justify-content: flex-start;
  39.         justify-content: flex-end;
  40.         justify-content: center;
  41.         /* 2.将所有项目看成一个个独立的个体来处理 */
  42.         /* 两端对齐 */
  43.         justify-content: space-between;
  44.         /* 分散对齐 */
  45.         justify-content: space-around;
  46.         /* 平均对齐 */
  47.         justify-content: space-evenly;
  48.       }
  49.       /* 二。项目在交叉轴上的对齐方式：align-items; */
  50.       .container {
  51.         align-items: stretch;
  52.         align-items: flex-start;
  53.         align-items: flex-end;
  54.         align-items: center;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <div class="container">
  60.       <div class="item">item1</div>
  61.       <div class="item">item2</div>
  62.       <div class="item">item3</div>
  63.       <div class="item">item4</div>
  64.       <!-- <div class="item">item5</div>
  65.           <div class="item">item6</div>
  66.           <div class="item">item7</div>
  67.           <div class="item">item8</div> -->
  68.     </div>
  69.   </body>
  70. </html>

4.弹性项目在多行容器中的排对齐方式弹性项目在多行容器中的排对齐方式

1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性项目在多行容器中的排对齐方式</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       .container {
  19.         /* 转为flex布局，这个元素就叫flex/弹性容器 */
  20.         display: flex;
  21.         height: 20rem;
  23.         border: 1px solid black;
  24.       }
  25.       /* 项目样式：必须是flex容器得子元素 */
  27.       .container > .item {
  28.         width: 10rem;
  29.         height: 5rem;
  30.         background-color: lightcyan;
  31.         border: 1px solid black;
  32.       }
  33.       /* 转为多行容器 */
  34.       .container {
  35.         flex-flow: row wrap;
  36.         /* 多行容器中对齐时，主轴上是没有剩余空间的，为什么？有剩余空间就不换行 */
  37.         /* 换行后，如果需要设置对齐方式，就要求交叉轴上必须要有剩余空间 */
  38.         align-content: stretch;
  39.         align-content: flex-start;
  40.         align-content: flex-end;
  41.         align-content: center;
  42.         /* 看成个体 */
  43.         /* 二段对齐 */
  44.         align-content: space-between;
  45.         /* 分散对齐 */
  46.         align-content: space-around;
  47.         /* 平均对齐 */
  48.         align-content: space-evenly;
  49.       }
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <div class="container">
  54.       <div class="item">item1</div>
  55.       <div class="item">item2</div>
  56.       <div class="item">item3</div>
  57.       <div class="item">item4</div>
  58.       <div class="item">item5</div>
  59.       <div class="item">item6</div>
  60.       <div class="item">item7</div>
  61.       <div class="item">item8</div>
  62.       <div class="item">item9</div>
  63.       <div class="item">item10</div>
  64.       <div class="item">item11</div>
  65.       <div class="item">item12</div>
  66.     </div>
  67.   </body>
  68. </html>
上一条：flex项目上的三个属性下一条：传统定位布三行三列和flex布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多