Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex 容器与项目的案例演示
Blogger Information
Blog 36
fans 0
comment 0
visits 28225
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 容器与项目的案例演示
phpcn_u202398
Original
526 people have browsed it

flex 容器与项目

1、 display属性

代码实例
  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的display属性</title>
  7.     <style>
  8.       .container {
  9.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.         display:inline-flex;
  15.       }
  16.       .item {
  17.         width: 150px;
  18.         height: 70px;
  19.         background-color: cyan;
  20.         font-size: 1.5rem;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="container">
  26.       <div class="item">php</div>
  27.       <div class="item">CSS</div>
  28.       <div class="item">HTML</div>
  29.       <div class="item">javascript</div>
  30.     </div>
  31.   </body>
  32.   </html>

" class="reference-link">

2、 flex-direction属性

代码实例
  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.       /* 容器 */
  9.       .container {
  10.         width: 400px;
  11.         height: 200px;
  12.       }
  13.       .container {
  14.         display: flex;
  15.       }
  16.       .container {
  17.         /*flex-direction: row;*/
  18.         flex-direction: row-reverse;
  19.        /* flex-direction: column;
  20.         flex-direction: column-reverse;*/
  21.       }
  22.       .item {
  23.         width: 150px;
  24.         height: 70px;
  25.         background-color: cyan;
  26.         font-size: 1.5rem;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">php</div>
  33.       <div class="item">CSS</div>
  34.       <div class="item">HTML</div>
  35.       <div class="item">javascript</div>
  36.     </div>
  37.   </body>
  38. </html>

" class="reference-link">

3 flex-wrap属性

代码实例
  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.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.       }
  15.       .container {
  16.         flex-direction: row;
  17.       }
  18.       .container {
  19.         /*flex-wrap: nowrap;
  20.         flex-wrap: wrap;*/
  21.         flex-wrap: wrap-reverse;
  22.       }
  23.       .item {
  24.         width: 150px;
  25.         height: 70px;
  26.         background-color: cyan;
  27.         font-size: 1.5rem;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">php</div>
  34.       <div class="item">CSS</div>
  35.       <div class="item">HTML</div>
  36.       <div class="item">javascript</div>
  37.     </div>
  38.   </body>
  39. </html>

" class="reference-link">

4、 justify-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.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.       }
  15.       .container {
  16.         /*justify-content: flex-start;
  17.         justify-content: flex-end;
  18.         justify-content: center;*/
  19.         justify-content: space-between;
  20.         /*justify-content: space-around;
  21.         justify-content: space-evenly;*/
  22.       }
  23.       .item {
  24.         width: 80px;
  25.         height: 50px;
  26.         background-color: cyan;
  27.         font-size: 1.5rem;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.       <div class="container">
  33.       <div class="item">php</div>
  34.       <div class="item">CSS</div>
  35.       <div class="item">HTML</div>
  36.       <div class="item">javascript</div>
  37.     </div>
  38.   </body>
  39. </html>

" class="reference-link">

5、 align-items属性

代码实例
  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.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.       }
  15.       .container {
  16.        /* align-items: flex-start;
  17.         align-items: flex-end;*/
  18.         align-items: center;
  19.       }
  20.       .item {
  21.         width: 80px;
  22.         height: 50px;
  23.         background-color: cyan;
  24.         font-size: 1.5rem;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="container">
  30.       <div class="item">php</div>
  31.       <div class="item">CSS</div>
  32.       <div class="item">HTML</div>
  33.       <div class="item">javascript</div>
  34.     </div>
  35.   </body>
  36. </html>

" class="reference-link">

6、 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.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.       }
  15.       .container {
  16.         flex-flow: row wrap;
  17.         /*align-content: stretch;
  18.         align-content: flex-start;
  19.         align-content: flex-end;
  20.         align-content: center;
  21.         align-content: space-between;
  22.         align-content: space-around;*/
  23.         align-content: space-evenly;
  24.       }
  25.       .item {
  26.         width: 80px;
  27.         height: 50px;
  28.         background-color: cyan;
  29.         font-size: 1.5rem;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item">php</div>
  36.       <div class="item">CSS</div>
  37.       <div class="item">HTML</div>
  38.       <div class="item">javascript</div>
  39.        <div class="item">C</div>
  40.       <div class="item">C#</div>
  41.       <div class="item">C++</div>
  42.       <div class="item">java</div>
  43.     </div>
  44.   </body>
  45. </html>

" class="reference-link">

7、 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.         width: 300px;
  10.         height: 150px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.       }
  15.       .item {
  16.         width: 50px;
  17.         height: 50px;
  18.         background-color: cyan;
  19.         font-size: 1.5rem;
  20.         align-self: auto;
  21.       }
  22.       .item:first-of-type {       
  23.         align-self: stretch;
  24.         background-color: lightgreen;
  25.       }
  26.       .item:nth-of-type(2) {
  27.         background-color: lightcoral;
  28.         align-self: flex-start;
  29.       }
  30.       .item:nth-of-type(3) {
  31.         background-color: wheat;
  32.         align-self: flex-end;
  33.       }
  34.       .item:last-of-type {
  35.         align-self: center;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="container">
  41.       <div class="item">php</div>
  42.       <div class="item">CSS</div>
  43.       <div class="item">HTML</div>
  44.       <div class="item">javascript</div>
  45.     </div>
  46.   </body>
  47. </html>

" class="reference-link">

8、 flex-grow属性

代码实例
  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.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.       }
  15.       .item {
  16.         width: 80px;
  17.         height: 50px;
  18.         background-color: cyan;
  19.         font-size: 1.5rem;
  20.         flex-grow: initial;
  21.         flex-grow: 0;
  22.       }
  23.       .item:first-of-type {
  24.         background-color: lightgreen;
  25.         flex-grow: 1;
  26.       }
  27.       .item:nth-of-type(2) {
  28.         background-color: lightcoral;
  29.         flex-grow: 2;
  30.       }
  31.       .item:last-of-type {
  32.         background-color: wheat;
  33.         flex-grow: 3;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <div class="container">
  39.      <div class="item">php</div>
  40.       <div class="item">CSS</div>
  41.       <div class="item">HTML</div>
  42.     </div>
  43.   </body>
  44. </html>

" class="reference-link">

9、 flex-shrink属性

代码实例
  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.         width: 300px;
  10.         height: 150px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.         flex-flow: row nowrap;
  15.       }
  16.       .item {
  17.         width: 150px;
  18.         height: 50px;
  19.         background-color: cyan;
  20.         font-size: 1.5rem;
  21.         flex-shrink: 0;
  22.       }
  24.       .item:first-of-type {
  25.         background-color: lightgreen;
  26.         flex-shrink: 1;
  27.       }
  28.       .item:nth-of-type(2) {
  29.         background-color: lightcoral;
  30.         flex-shrink: 2;
  31.       }
  32.       .item:last-of-type {
  33.         background-color: wheat;
  34.         flex-shrink: 3;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <div class="container">
  40.      <div class="item">php</div>
  41.       <div class="item">CSS</div>
  42.       <div class="item">HTML</div>
  43.     </div>
  44.   </body>
  45. </html>

" class="reference-link">

10、 flex-basis属性

代码实例
  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.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.         flex-flow: row wrap;
  15.       }
  16.       .item {
  17.         width: 80px;
  18.         height: 50px;
  19.         background-color: cyan;
  20.         font-size: 1.5rem;
  21.       }
  22.       .item {
  23.         flex-basis: auto;
  24.         flex-basis: 70px;
  25.         flex-basis: 20%;
  26.         flex-basis: 5rem;
  27.         max-width: 100px;
  28.         flex-basis: 150px;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="container">
  34.       <div class="item">php</div>
  35.       <div class="item">CSS</div>
  36.       <div class="item">HTML</div>
  37.     </div>
  38.   </body>
  39. </html>

11、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>项目在主轴上的计算宽度</title>
  7.     <style>
  8.       .container {
  9.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.         flex-flow: row wrap;
  15.       }
  16.       .item {
  17.         width: 80px;
  18.         height: 50px;
  19.         background-color: cyan;
  20.         font-size: 1.5rem;
  21.       }
  22.       .item {
  23.           /*flex:0 1 auto;
  24.           flex:1 1 auto;*/
  25.         flex: 0 0 auto;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="container">
  31.       <div class="item">php</div>
  32.       <div class="item">CSS</div>
  33.       <div class="item">HTML</div>
  34.     </div>
  35.   </body>
  36. </html>

" class="reference-link">

12、 双值语法

代码实例
  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.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.         flex-flow: row wrap;
  15.       }
  16.       .item {
  17.         width: 80px;
  18.         height: 50px;
  19.         background-color: cyan;
  20.         font-size: 1.5rem;
  21.       }
  22.       .item {
  23.         flex: 0 200px;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">php</div>
  30.       <div class="item">CSS</div>
  31.       <div class="item">HTML</div>
  32.     </div>
  33.   </body>
  34. </html>

" class="reference-link">

13、 单值语法

代码实例
  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.         width: 400px;
  10.         height: 200px;
  11.       }
  12.       .container {
  13.         display: flex;
  14.         flex-flow: row wrap;
  15.       }
  16.       .item {
  17.         width: 80px;
  18.         height: 50px;
  19.         background-color: cyan;
  20.         font-size: 1.5rem;
  21.       }
  22.       .item {
  23.         flex:1;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">php</div>
  30.       <div class="item">CSS</div>
  31.       <div class="item">HTML</div>
  32.     </div>
  33.   </body>
  34. </html>

flex容器与项目学习总结

本节课我们学习了flex的属性，通过本节课的学习与之前学到的float相比，flex的布局代码简洁，使用灵活，能够快速的进行页面布局，使我学到了新的前端布局方法，同时增加了我的学习兴趣。

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