简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex 容器与项目的案例演示

flex 容器与项目的案例演示

phpcn_u202398
phpcn_u202398原创
2020年04月10日 14:14:43517浏览

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的布局代码简洁，使用灵活，能够快速的进行页面布局，使我学到了新的前端布局方法，同时增加了我的学习兴趣。

上一条：前端入门：PHP开发环境配置与mrakdown语法下一条：框模型的知识内容
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多