Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器与项目的常用属性实例演示
Blogger Information
Blog 47
fans 3
comment 0
visits 38108
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
621 people have browsed it

flex容器与项目的常用属性实例演示

1. flex容器常用属性

flex容器 描述 属性
flex-flow 主轴方向与换行 row/column norap/wrap
justify-content 项目在主轴上的对齐方式 默认：flex-start 项目位于容器结尾：flex-end 项目位于容器的中心：center 两端对齐：space-between 分散对齐：space-around 平均对齐：space-evenly
align-items 项目在交叉轴上的对齐方式 默认拉伸：stretch 元素位于容器中心：center 元素位于容器开头：flex-start 元素位于容器结尾：flex-end
align-content 项目在多行容器中的交叉轴上的对齐方式 默认拉伸：stretch 元素位于容器的中心：center 元素位于容器的开头：flex-start 元素位于容器结尾：flex-end 两端对齐：space-between 分散对齐：space-around 平均对齐：space-evenly
  • 主轴方向与换行
  1. <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.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             background-color: skyblue;
  16.             height: 15em;
  17.             display: flex;
  18.             margin: 1em;
  19.             padding: 2em;
  20.             border: 2px solid red;
  22.         }
  24.         .container>.item {
  25.             border: 1px solid black;
  26.             background-color: lightcyan;
  27.             height: 5em;
  28.             width: 5em;
  29.         }
  31.         .container {
  32.             /* 水平方向是row 垂直方向是column 换行wrap 不换行nowrap */
  33.             /* 水平方向 不换行 */
  34.             flex-flow: row nowrap;
  35.             /* 水平方向 换行显示 */
  36.             flex-flow: row wrap;
  38.             /* 垂直方向 不换行 */
  39.             flex-flow: column nowrap;
  40.             /* 垂直方向 换行 */
  41.             flex-flow: column wrap;
  42.         }
  43.     </style>
  44. </head>
  46. <body>
  47.     <div class="container">
  48.         <div class="item">test1</div>
  49.         <div class="item">test2</div>
  50.         <div class="item">test3</div>
  51.         <div class="item">test4</div>
  52.         <div class="item">test5</div>
  53.         <div class="item">test6</div>
  54.     </div>
  55. </body>
  57. </html>

演示截图

  • 项目在主轴上的对齐方式
  1. <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.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             background-color: lightcyan;
  16.             border: 1px solid black;
  17.             height: 15em;
  18.             margin: 1em;
  19.             padding: 1em;
  20.             display: flex;
  21.         }
  23.         .container>.item {
  24.             background-color: lightblue;
  25.             border: 1px solid black;
  26.             height: 5em;
  27.             width: 5em;
  28.         }
  30.         .container {
  31.             /* 1.将所有项目视为一个整体，在项目组两边进行分配 */
  32.             /* 右对齐 */
  33.             justify-content: flex-start;
  34.             /* 左对齐 */
  35.             justify-content: flex-end;
  36.             /* 居中显示 */
  37.             justify-content: center;
  39.             /* 2.将项目视为一个个独立的个体，在项目之间进行分配 */
  40.             /* 两端对齐 */
  41.             justify-content: space-between;
  42.             /* 分散对齐 */
  43.             justify-content: space-around;
  44.             /* 平均对齐 */
  45.             justify-content: space-evenly;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="item">test1</div>
  53.         <div class="item">test2</div>
  54.         <div class="item">test3</div>
  55.         <div class="item">test4</div>
  56.         <div class="item">test5</div>
  57.         <div class="item">test6</div>
  58.     </div>
  59. </body>
  61. </html>

演示截图

  • 项目在交叉轴上的对齐方式
  1. <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.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             background-color: skyblue;
  16.             border: 3px solid red;
  17.             padding: 1em;
  18.             margin: 1em;
  19.             display: flex;
  20.             height: 15em;
  21.         }
  23.         .container>.item {
  24.             background-color: yellow;
  25.             border: 1px solid red;
  26.             height: 5em;
  27.             width: 5em;
  28.         }
  30.         .container {
  31.             /* 默认，拉伸子元素 */
  32.             align-items: stretch;
  33.             /* 位于元素容器顶部 */
  34.             align-items: flex-start;
  35.             /* 位于元素容器底部 */
  36.             align-items: flex-end;
  37.             /* 元素位于容器中心 */
  38.             align-items: center;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">test1</div>
  46.         <div class="item">test2</div>
  47.         <div class="item">test3</div>
  48.         <div class="item">test4</div>
  49.         <div class="item">test5</div>
  50.         <div class="item">test6</div>
  51.     </div>
  52. </body>
  54. </html>

  • 项目在多行容器中的交叉轴上的对齐方式
  1. <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.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             background-color: lightgreen;
  16.             border: 1px solid red;
  17.             height: 25em;
  18.             margin: 1em;
  19.             padding: 1em;
  20.             display: flex;
  21.         }
  23.         .container>.item {
  24.             background-color: skyblue;
  25.             border: 1px solid red;
  26.             height: 5em;
  27.             width: 8em;
  28.         }
  30.         .container {
  31.             flex-flow: row wrap;
  32.             /* 拉伸对齐 */
  33.             align-content: stretch;
  34.             /* 位于容器的中心 */
  35.             align-content: center;
  36.             /* 位于容器的开头 */
  37.             align-content: flex-start;
  38.             /* 位于容器结尾 */
  39.             align-content: flex-end;
  40.             /* 两端对齐 */
  41.             align-content: space-between;
  42.             /* 分散对齐 */
  43.             align-content: space-around;
  44.             /* 平均对齐 */
  45.             align-content: space-evenly;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="item">test1</div>
  53.         <div class="item">test2</div>
  54.         <div class="item">test3</div>
  55.         <div class="item">test4</div>
  56.         <div class="item">test5</div>
  57.         <div class="item">test6</div>
  58.         <div class="item">test7</div>
  59.         <div class="item">test8</div>
  60.         <div class="item">test9</div>
  61.         <div class="item">test10</div>
  62.         <div class="item">test11</div>
  63.         <div class="item">test12</div>
  64.     </div>
  65. </body>
  67. </html>

演示截图

2.flex项目常用属性

flex项目 描述 属性
flex 项目的伸缩与宽度 放大（0禁止 1开启） 收缩（0禁止 1开启） 基准宽度（使用auto）
align-self 项目的对齐方式 默认：stretch 位于项目顶部：flex-start 位于项目底部：flex-end 位于项目中心：center
order 项目在主轴上的排列顺序 0默认，支持负值
  • 项目的伸缩与宽度
  1. <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.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             background-color: skyblue;
  16.             border: 2px solid red;
  17.             height: 15em;
  18.             margin: 1em;
  19.             padding: 1em;
  20.             display: flex;
  21.         }
  23.         .container>.item {
  24.             background-color: lightcyan;
  25.             border: 1px solid black;
  26.             height: 2em;
  27.             width: 5em;
  28.         }
  30.         .container>.item {
  31.             /* flex: flex-gro flex-shrink flex-basis */
  32.             /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
  33.             /* 默认值：不放大或收缩  */
  34.             flex: 0 1 auto;
  35.             /* 放大 收缩 */
  36.             flex: 1 1 auto;
  37.             /* 禁止放大 收缩 */
  38.             flex: 0 0 auto;
  40.             /* 如果只有一个数字，省略掉后面两个参数，表示的放大因子 */
  41.             flex: 1;
  42.             /* flex通常不会用来设置所有项目的默认选项，通常用来设置某一个项目的特征，也就是定制 */
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div class="container">
  49.         <div class="item">test1</div>
  50.         <div class="item">test2</div>
  51.         <div class="item">test3</div>
  52.         <div class="item">test4</div>
  53.         <div class="item">test5</div>
  54.         <div class="item">test6</div>
  55.     </div>
  56. </body>
  58. </html>

演示截图

  • 项目的对齐方式
  1. <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.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             background-color: lightblue;
  16.             border: 3px solid black;
  17.             margin: 2em;
  18.             padding: 2em;
  19.             height: 15em;
  20.             display: flex;
  21.         }
  23.         .container>.item {
  24.             background-color: lightgreen;
  25.             border: 1px solid red;
  26.             width: 5em;
  27.         }
  29.         .container>.item:nth-of-type(3) {
  30.             align-self: stretch;
  31.             /* 上对齐 */
  32.             align-self: flex-start;
  33.             /* 下对齐 */
  34.             align-self: flex-end;
  35.             /* 居中 */
  36.             align-self: center;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <div class="container">
  43.         <div class="item">test1</div>
  44.         <div class="item">test2</div>
  45.         <div class="item">test3</div>
  46.         <div class="item">test4</div>
  47.     </div>
  48. </body>
  50. </html>

演示截图

  • 项目在主轴上的排列顺序
  1. <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.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             background-color: violet;
  16.             border: 2px solid yellow;
  17.             margin: 1em;
  18.             padding: 1em;
  19.             display: flex;
  20.             height: 15em;
  21.         }
  23.         .container>.item {
  24.             background-color: lightblue;
  25.             border: 1px solid lightseagreen;
  26.             width: 8em;
  27.         }
  29.         .container>.item:first-of-type {
  30.             order: 1;
  31.             background-color: yellow;
  32.         }
  34.         .container>.item:nth-of-type(2) {
  35.             order: -1;
  36.             background-color: lightgreen;
  37.         }
  39.         .container>.item:nth-of-type(2)+* {
  40.             order: 0;
  41.             background-color: red;
  42.         }
  44.         .container>.item:last-of-type {
  45.             order: 4;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="item">test1</div>
  53.         <div class="item">test2</div>
  54.         <div class="item">test3</div>
  55.         <div class="item">test4</div>
  56.     </div>
  57. </body>
  59. </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