Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器与项目的常用属性
Blogger Information
Blog 23
fans 0
comment 3
visits 23612
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容器与项目的常用属性
a.
Original
527 people have browsed it

1. 容器属性

编号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-conten 项目在主轴上的对齐方式
3 aling-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式

代码示例

  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.         display: flex;
  10.         height: 40em;
  12.         padding: 1em;
  13.         margin: 1em;
  14.         border: limegreen 1px solid;
  15.       }
  16.       .item {
  17.         border: magenta solid 1px;
  18.         background-color: mediumslateblue;
  19.         width: 4em;
  20.         height: 3em;
  21.       }
  22.       /* 单行容器属性 */
  23.       .container {
  24.         /* flex-direction: row; 这个是默认属性 */
  25.         /* flex-wrap: nowrap; 这个是控制换行 */
  26.         /* 一般使用简写 */
  27.         /* flex-flow: nowrap row;默认值 */
  29.         /* 多行容器：一行显示不行，允许换行显示 */
  30.         /* flex-flow: row wrap; */
  32.         /* 换为列方向  主轴垂直方向*/
  33.         /* flex-flow: nowrap column; */
  34.         /* flex-flow: wrap column; */
  35.       }
  36.       /* 设置项目在单行容器上轴上的对齐前提：主轴上存在剩余空间 */
  37.       /* 空间分配的两个方案： */
  39.       .container {
  40.         /* 1.将所有项目视为一个整体，在项目组两边进行分配  */
  41.         /* 起始边对齐 */
  42.         justify-content: flex-start;
  43.         /* 终止边对齐 */
  44.         justify-content: flex-end;
  45.         /* 居中对齐 */
  46.         justify-content: center;
  47.         /* 2.将所有项目视为独立个体，在项目之间进行分配  */
  48.         /* 两端对齐 */
  49.         justify-content: space-between;
  50.         /*分散对齐：每个项目中间平均分配*/
  51.         justify-content: space-around;
  52.         /* 平均对齐 */
  53.         justify-content: space-evenly;
  54.       }
  56.       /* 交叉轴上的对齐方式： */
  57.       .container {
  58.         /* 默认拉伸 */
  59.         align-items: stretch;
  60.         align-items: flex-start;
  61.         align-items: flex-end;
  62.         align-items: center;
  63.       }
  64.     </style>
  65.   </head>
  66.   <body>
  67.     <div class="container">
  68.       <div class="item">1</div>
  69.       <div class="item">2</div>
  70.       <div class="item">3</div>
  71.       <div class="item">4</div>
  72.       <div class="item">5</div>
  73.       <div class="item">6</div>
  74.       <div class="item">7</div>
  75.       <div class="item">8</div>
  76.     </div>
  77.   </body>
  78. </html>

效果：

  • 起始边对齐
  • 终止边对齐
  • 居中对齐
  • 两端对齐
  • 分散对齐
  • 平均对齐

1.4 align-content

  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.         display: flex;
  10.         height: 40em;
  11.         padding: 1em;
  12.         margin: 1em;
  13.         border: limegreen 1px solid;
  14.       }
  15.       .item {
  16.         border: magenta solid 1px;
  17.         background-color: mediumslateblue;
  18.         width: 4em;
  19.         height: 3em;
  20.       }
  21.       /* 多行容器属性 */
  22.       .container {
  23.         /* 多行容器 */
  24.         flex-flow: row wrap;
  25.         /* 默认值 */
  26.         align-content: stretch;
  28.         align-content: flex-start;
  29.         align-content: flex-end;
  30.         align-content: center;
  32.         /* 两端对齐 */
  33.         align-content: space-between;
  34.         /* 分散对齐 */
  35.         align-content: space-around;
  36.         /*平均对齐*/
  37.         align-content: space-evenly;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="container">
  43.       <div class="item">1</div>
  44.       <div class="item">2</div>
  45.       <div class="item">3</div>
  46.       <div class="item">4</div>
  47.       <div class="item">5</div>
  48.       <div class="item">6</div>
  49.       <div class="item">7</div>
  50.       <div class="item">8</div>
  51.     </div>
  52.   </body>
  53. </html>

效果：

  • 多行容器

2. 项目属性

编号 属性 描述
1 flex 项目的缩放比例与基准宽度
2 align-self 单个项目在交叉轴上的对齐方式
4 order 项目在主轴上排列顺序

2.1 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.       .container {
  9.         display: flex;
  10.         height: 40em;
  11.         padding: 1em;
  12.         margin: 1em;
  13.         border: limegreen 1px solid;
  14.       }
  15.       .item {
  16.         border: magenta solid 1px;
  17.         background-color: mediumslateblue;
  18.         width: 8em;
  19.         height: 3em;
  21.         /* flex: flex-grow flex-shrink flex-basis */
  22.         /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
  23.         /* 默认属性,不放大可以收缩 */
  24.         flex: 0 1 auto;
  25.         flex: initial;
  26.         /* 放大和收缩 */
  27.         flex: 1 1 auto;
  28.         flex: auto;
  29.         /* 禁止放大收缩 */
  30.         flex: 0 0 auto;
  31.         /* 简写 */
  32.         flex: none;
  34.         /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
  35.         flex: 1;
  36.         /* 等于 flex: 1 1 auto; */
  38.         /* flex一般不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
  39.       }
  40.       .container > .item:last-of-type {
  41.         flex: 2;
  42.       }
  43.       .container > .item:nth-of-type(2),
  44.       .container > .item:first-of-type {
  45.         flex: 1;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="container">
  51.       <div class="item">1</div>
  52.       <div class="item">2</div>
  53.       <div class="item">3</div>
  54.     </div>
  55.   </body>
  56. </html>

2.2 align-self

  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.         display: flex;
  10.         height: 20em;
  11.         padding: 1em;
  12.         margin: 1em;
  13.         border: limegreen 1px solid;
  14.       }
  15.       .item {
  16.         border: magenta solid 1px;
  17.         background-color: mediumslateblue;
  18.         width: 4em;
  19.         height: 3em;
  20.       }
  21.       /* 设置一个项目与其它项目对齐方式不一样 */
  22.       .item:first-of-type {
  23.         align-self: stretch;
  24.         align-self: flex-start;
  25.         align-self: flex-end;
  26.         align-self: center;
  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>

2.3 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>容器属性</title>
  7.     <style>
  8.       .container {
  9.         display: flex;
  10.         height: 40em;
  11.         padding: 1em;
  12.         margin: 1em;
  13.         border: limegreen 1px solid;
  14.       }
  15.       .item {
  16.         border: magenta solid 1px;
  17.         position: relative;
  18.         width: 4em;
  19.         height: 3em;
  20.       }
  21.       /* 设置一个项目与其它项目对齐方式不一样 */
  22.       .container > .item:first-of-type {
  23.         background-color: mediumslateblue;
  24.         order: 2;
  25.       }
  26.       .container > .item:nth-of-type(2) {
  27.         background-color: rgb(186, 211, 96);
  28.         order: 1;
  29.       }
  30.       .container > .item:last-of-type {
  31.         background-color: rgb(155, 238, 87);
  32.         order: 3;
  33.       }
  34.     </style>
  35.   </head>
  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>
  42.   </body>
  43. </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
2 comments
a. 2020-12-23 13:09:04
row-reverse和colume-reverse写掉了
2 floor
a. 2020-12-23 12:13:35
好无语，我的效果图被吞了
1 floor
Author's latest blog post