简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > flex容器中的四个属性的功能，参数，以及作用
Blogger Information
Blog 20
fans 0
comment 0
visits 11668
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex容器中的四个属性的功能，参数，以及作用
愿情的博客
Original
586 people have browsed it

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>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！