Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器属性的功能，参数，以及作用
Blogger Information
Blog 11
fans 0
comment 0
visits 6575
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容器属性的功能，参数，以及作用
Ghcᝰ
Original
558 people have browsed it

什么是flex容器？

  • 把元素转为Flex布局，那么这个元素就被称为Flex容器，即弹性容器！

Flex四大属性的介绍

1:主轴方向与换行方式

flex-flow(主轴方向与换行方式)属性的用法：
  • 主轴方向水平排列且不换行：flex-flow: row nowrap
    默认值主轴水平不换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  36.         .container {
  37.             /* 默认值：主轴水平方排列向且不换行 */
  38.             flex-flow: row nowrap;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.     </div>
  54. </body>
  56. </html>
  • 主轴方向水平排列并换行：flex-flow: row nowrap;
    水平换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  36.         .container {
  37.             /* 主轴水平方排列向并换行 */
  38.             flex-flow: row wrap;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.     </div>
  54. </body>
  56. </html>
  • 主轴方向垂直排列且不换行：column nowrap
    垂直排列不换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 200rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  36.         .container {
  37.             /* 主轴垂直方向排列不换行 */
  38.             flex-flow: column nowrap;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.     </div>
  54. </body>
  56. </html>
  • 主轴方向垂直排列并换行：column wrap
    垂直换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  36.         .container {
  37.             /* 主轴垂直方排列向并换行 */
  38.             flex-flow: column wrap;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.     </div>
  54. </body>
  56. </html>

2:项目在主轴上的对其方式

justify-content(项目在主轴上的对其方式)属性的用法：
  • flex-start 默认值：起始线(左对齐)
  • flex-end 终止线（右对齐）
  • center 居中对齐
  • space-between 两端对齐
  • space-around 分散对齐
  • space-evenly 平均对齐
    下面演示平均对齐，其他只是参数替换，具体效果自行测试：
    项目平均对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  37.         .container {
  38.             /* .项目在主轴上的平均对齐，前提是主轴上存在剩余空间 */
  39.             justify-content: space-evenly;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="item">item1</div>
  47.         <div class="item">item2</div>
  48.         <div class="item">item3</div>
  49.         <div class="item">item4</div>
  50.         <div class="item">item5</div>
  51.         <div class="item">item6</div>
  52.         <div class="item">item7</div>
  53.         <div class="item">item8</div>
  54.     </div>
  55. </body>
  57. </html>

3.项目在交叉轴上的对齐方式

align-items(项目在交叉轴上的对齐方式)属性的用法：
  • stretch 默认值：拉伸
  • flex-start 起始线（顶部对齐）
  • flex-end 终止线（底部对齐）
  • center 剧中对齐
    下面演示交叉轴居中对齐，其他只是参数替换，具体效果自行测试：
    交叉轴剧中对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  37.         .container {
  38.             /* .项目在交叉轴上的平均对齐 */
  39.             align-items: center;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="item">item1</div>
  47.         <div class="item">item2</div>
  48.         <div class="item">item3</div>
  49.         <div class="item">item4</div>
  50.         <div class="item">item5</div>
  51.         <div class="item">item6</div>
  52.         <div class="item">item7</div>
  53.         <div class="item">item8</div>
  54.     </div>
  55. </body>
  57. </html>

4.项目在多行容器交叉轴上的对齐方式

align-content(项目在多行容器交叉轴上的对齐方式)属性的用法：
把项目看成整体时参数：
  • stretch 默认值：拉伸
  • flex-start 起始线（顶部对齐）
  • flex-end 终止线（底部对齐）
  • center 剧中对齐
    把项目看成个体时参数：
  • space-between 两端对齐
  • space-around 分散对齐
  • space-evenly 平均对齐
下面演示项目在多行容器交叉轴上两端对齐，其他只是参数替换，具体效果自行测试：

两端对齐 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             width: 10rem;
  32.             background-color: blue;
  33.             border: 1px solid black;
  34.         }
  36.         .container {
  37.             /* .项目在交叉轴上的平均对齐 */
  38.             flex-flow: row wrap;
  40.             align-content: space-between;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div class="container">
  49.         <div class="item">item1</div>
  50.         <div class="item">item2</div>
  51.         <div class="item">item3</div>
  52.         <div class="item">item4</div>
  53.         <div class="item">item5</div>
  54.         <div class="item">item6</div>
  55.         <div class="item">item7</div>
  56.         <div class="item">item8</div>
  57.     </div>
  58. </body>
  60. </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