devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Css提高——flex布局及其相关属性

作者：Cpp五条 | 2024-03-15 14:41:21

赞

踩

Css提高——flex布局及其相关属性

目录：

1、传统布局与flex布局的区别

2、flex的布局原理

 3、flex常见的父项属性

3.1、flex-direction ：设置主轴的方向

3.2、justify-content 设置主轴上的子元素排列方式

3.3、flex-wrap 设置子元素是否换行

3.4、align-items 设置侧轴上的子元素排列方式（单行 ）

3.5、align-content 设置侧轴上的子元素的排列方式（多行）

         3.6、flex-flow（flex-direction 和 flex-wrap 属性的复合属性

 4、flex常见的子项属性 

4.1、flex

4.2、align-self 控制子项自己在侧轴上的排列方式

1、传统布局与flex布局的区别

2、flex的布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。

  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

 3、flex常见的父项属性

  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

3.1、flex-direction ：设置主轴的方向

1、主轴和侧轴的概念

2、flex-direction的属性值

3、例子

如果我想要将flex的子元素从右往左排列的话，则需要对父元素添加flex-direction: row-reverse;属性

1、代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .main {
  10.             width: 800px;
  11.             height: 600px;
  12.  
  13.             margin: 0 auto;
  14.             border-radius: 12px;
  15.  
  16.             background-color: skyblue;
  17.  
  18.             display: flex;
  19.  
  20.             flex-direction: row-reverse;
  21.  
  22.         }
  23.  
  24.         span {
  25.             width: 200px;
  26.             margin-left: 10px;
  27.             height: 100%;
  28.  
  29.             border-radius: 12px;
  30.  
  31.             background-color: pink;
  32.  
  33.  
  34.         }
  35.     </style>
  36. </head>
  37.  
  38. <body>
  39.     <div class="main">
  40.         <span>1</span>
  41.         <span>2</span>
  42.         <span>3</span>
  43.     </div>
  44. </body>
  45.  
  46. </html>
2、 效果图

3.2、justify-content 设置主轴上的子元素排列方式

1、justify-content 的属性值：

2、例子：
2、代码： 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             display: flex;
  12.             width: 800px;
  13.             height: 400px;
  14.             background-color: pink;
  15.             /* 我们现在的主轴是y轴 */
  16.             flex-direction: column;
  17.             /* justify-content: center; */
  18.             justify-content: space-between;
  19.         }
  20.         
  21.         div span {
  22.             width: 150px;
  23.             height: 100px;
  24.             background-color: purple;
  25.         }
  26.     </style>
  27. </head>
  28.  
  29. <body>
  30.     <div>
  31.         <span>1</span>
  32.         <span>2</span>
  33.         <span>3</span>
  34.     </div>
  35. </body>
  36.  
  37. </html>
3、效果图：

3.3、flex-wrap 设置子元素是否换行

1、flex-wrap 属性值

2、例子
1、代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             display: flex;
  12.             width: 600px;
  13.             height: 400px;
  14.             background-color: pink;
  15.             /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
  16.             /* flex-wrap: nowrap; */
  17.             flex-wrap: wrap;
  18.         }
  19.         
  20.         div span {
  21.             width: 150px;
  22.             height: 100px;
  23.             background-color: purple;
  24.             color: #fff;
  25.             margin: 10px;
  26.         }
  27.     </style>
  28. </head>
  29.  
  30. <body>
  31.     <div>
  32.         <span>1</span>
  33.         <span>2</span>
  34.         <span>3</span>
  35.         <span>4</span>
  36.         <span>5</span>
  37.     </div>
  38. </body>
  39.  
  40. </html>
2、效果图

3.4、align-items 设置侧轴上的子元素排列方式（单行 ）

1、align-items 属性值

2、例子
1、代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             display: flex;
  12.             width: 800px;
  13.             height: 400px;
  14.             background-color: pink;
  15.             /* 默认的主轴是 x 轴 row */
  16.             flex-direction: column;
  17.             justify-content: center;
  18.             /* 我们需要一个侧轴居中 */
  19.             /* 拉伸，但是子盒子不要给高度 */
  20.             /* align-items: stretch; */
  21.             align-items: center;
  22.             /* align-content: center; */
  23.         }
  24.         
  25.         div span {
  26.             width: 150px;
  27.             height: 100px;
  28.             background-color: purple;
  29.             color: #fff;
  30.             margin: 10px;
  31.         }
  32.     </style>
  33. </head>
  34.  
  35. <body>
  36.     <div>
  37.         <span>1</span>
  38.         <span>2</span>
  39.         <span>3</span>
  40.     </div>
  41. </body>
  42.  
  43. </html>
2、效果图：

3.5、align-content 设置侧轴上的子元素的排列方式（多行）

1、align-content属性值

2、例子
1、代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             display: flex;
  12.             width: 800px;
  13.             height: 400px;
  14.             background-color: pink;
  15.             /* 换行 */
  16.             flex-wrap: wrap;
  17.             /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
  18.             /* align-content: flex-start; */
  19.             /* align-content: center; */
  20.             /* align-content: space-between; */
  21.             align-content: space-around;
  22.         }
  23.         
  24.         div span {
  25.             width: 150px;
  26.             height: 100px;
  27.             background-color: purple;
  28.             color: #fff;
  29.             margin: 10px;
  30.         }
  31.     </style>
  32. </head>
  33.  
  34. <body>
  35.     <div>
  36.         <span>1</span>
  37.         <span>2</span>
  38.         <span>3</span>
  39.         <span>4</span>
  40.         <span>5</span>
  41.         <span>6</span>
  42.     </div>
  43. </body>
  44.  
  45. </html>
2、效果图：

3.6、flex-flow（flex-direction 和 flex-wrap 属性的复合属性）

1、flex-flow 属性值

 4、flex常见的子项属性 

4.1、flex

1、flex属性

2、例子
 1、代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .main {
  10.             width: 800px;
  11.             height: 400px;
  12.  
  13.             background-color: skyblue;
  14.             margin: 0 auto;
  15.             border-radius: 12px;
  16.  
  17.             display: flex;
  18.         }
  19.  
  20.         span {
  21.             flex: 1;
  22.             background-color: green;
  23.             height: 100px;
  24.             border-radius: 12px;
  25.             margin-left: 10px;
  26.         }
  27.  
  28.         .main span:nth-child(2) {
  29.             flex: 2;
  30.             background-color: blue;
  31.             height: 100px;
  32.             border-radius: 12px;
  33.             margin-left: 10px;
  34.         }
  35.     </style>
  36. </head>
  37.  
  38. <body>
  39.     <div class="main">
  40.         <span>1</span>
  41.         <span>2</span>
  42.         <span>3</span>
  43.     </div>
  44. </body>
  45.  
  46. </html>
2、效果图

4.2、align-self 控制子项自己在侧轴上的排列方式&

1、定义

align-self

order：

2、例子：
1、代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .main {
  10.             width: 90%;
  11.             height: 400px;
  12.  
  13.             background-color: skyblue;
  14.             margin: 0 auto;
  15.             border-radius: 12px;
  16.  
  17.  
  18.             display: flex;
  19.             flex-direction: row;
  20.         }
  21.  
  22.         span {
  23.             flex: 1;
  24.             background-color: green;
  25.             height: 100px;
  26.             border-radius: 12px;
  27.             margin-left: 10px;
  28.         }
  29.  
  30.         .main span:nth-child(2) {
  31.             flex: 2;
  32.             background-color: blue;
  33.             height: 100px;
  34.             border-radius: 12px;
  35.             align-self: flex-end;
  36.             margin-left: 10px;
  37.         }
  38.  
  39.         .main span:nth-child(3) {
  40.             height: 100px;
  41.             border-radius: 12px;
  42.             order: -1;
  43.             margin-left: 10px;
  44.         }
  45.     </style>
  46. </head>
  47.  
  48. <body>
  49.     <div class="main">
  50.         <span>1</span>
  51.         <span>2</span>
  52.         <span>3</span>
  53.     </div>
  54. </body>
  55.  
  56. </html>
2、效果图：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/241856
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号