search

博客列表 >flex容器属性的功能，参数，以及作用

flex容器属性的功能，参数，以及作用

Ghcᝰ
Ghcᝰ原创
2021年03月25日 19:53:29556浏览

什么是flex容器？

  • 把元素转为Flex布局，那么这个元素就被称为Flex容器，即弹性容器！

Flex四大属性的介绍

1:主轴方向与换行方式

flex-flow(主轴方向与换行方式)属性的用法：
  • 主轴方向水平排列且不换行：flex-flow: row nowrap
    默认值主轴水平不换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  36.         .container {
  37.             /* 默认值：主轴水平方排列向且不换行 */
  38.             flex-flow: row nowrap;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.     </div>
  54. </body>
  56. </html>
  • 主轴方向水平排列并换行：flex-flow: row nowrap;
    水平换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  36.         .container {
  37.             /* 主轴水平方排列向并换行 */
  38.             flex-flow: row wrap;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.     </div>
  54. </body>
  56. </html>
  • 主轴方向垂直排列且不换行：column nowrap
    垂直排列不换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 200rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  36.         .container {
  37.             /* 主轴垂直方向排列不换行 */
  38.             flex-flow: column nowrap;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.     </div>
  54. </body>
  56. </html>
  • 主轴方向垂直排列并换行：column wrap
    垂直换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  36.         .container {
  37.             /* 主轴垂直方排列向并换行 */
  38.             flex-flow: column wrap;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.     </div>
  54. </body>
  56. </html>

2:项目在主轴上的对其方式

justify-content(项目在主轴上的对其方式)属性的用法：
  • flex-start 默认值：起始线(左对齐)
  • flex-end 终止线（右对齐）
  • center 居中对齐
  • space-between 两端对齐
  • space-around 分散对齐
  • space-evenly 平均对齐
    下面演示平均对齐，其他只是参数替换，具体效果自行测试：
    项目平均对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  37.         .container {
  38.             /* .项目在主轴上的平均对齐，前提是主轴上存在剩余空间 */
  39.             justify-content: space-evenly;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="item">item1</div>
  47.         <div class="item">item2</div>
  48.         <div class="item">item3</div>
  49.         <div class="item">item4</div>
  50.         <div class="item">item5</div>
  51.         <div class="item">item6</div>
  52.         <div class="item">item7</div>
  53.         <div class="item">item8</div>
  54.     </div>
  55. </body>
  57. </html>

3.项目在交叉轴上的对齐方式

align-items(项目在交叉轴上的对齐方式)属性的用法：
  • stretch 默认值：拉伸
  • flex-start 起始线（顶部对齐）
  • flex-end 终止线（底部对齐）
  • center 剧中对齐
    下面演示交叉轴居中对齐，其他只是参数替换，具体效果自行测试：
    交叉轴剧中对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             padding: 1rem;
  32.             width: 10rem;
  33.             background-color: blue;
  34.             border: 1px solid black;
  35.         }
  37.         .container {
  38.             /* .项目在交叉轴上的平均对齐 */
  39.             align-items: center;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="item">item1</div>
  47.         <div class="item">item2</div>
  48.         <div class="item">item3</div>
  49.         <div class="item">item4</div>
  50.         <div class="item">item5</div>
  51.         <div class="item">item6</div>
  52.         <div class="item">item7</div>
  53.         <div class="item">item8</div>
  54.     </div>
  55. </body>
  57. </html>

4.项目在多行容器交叉轴上的对齐方式

align-content(项目在多行容器交叉轴上的对齐方式)属性的用法：
把项目看成整体时参数：
  • stretch 默认值：拉伸
  • flex-start 起始线（顶部对齐）
  • flex-end 终止线（底部对齐）
  • center 剧中对齐
    把项目看成个体时参数：
  • space-between 两端对齐
  • space-around 分散对齐
  • space-evenly 平均对齐
下面演示项目在多行容器交叉轴上两端对齐，其他只是参数替换，具体效果自行测试：

两端对齐 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹性flex容器与项目</title>
  9.     <style>
  10.         * {
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         :root {
  17.             font-size: 10px;
  18.         }
  20.         body {
  21.             font-size: 1.6rem;
  22.         }
  24.         .container {
  25.             display: flex;
  26.             height: 20rem;
  27.             border: 1px solid black;
  28.         }
  30.         .item {
  31.             width: 10rem;
  32.             background-color: blue;
  33.             border: 1px solid black;
  34.         }
  36.         .container {
  37.             /* .项目在交叉轴上的平均对齐 */
  38.             flex-flow: row wrap;
  40.             align-content: space-between;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div class="container">
  49.         <div class="item">item1</div>
  50.         <div class="item">item2</div>
  51.         <div class="item">item3</div>
  52.         <div class="item">item4</div>
  53.         <div class="item">item5</div>
  54.         <div class="item">item6</div>
  55.         <div class="item">item7</div>
  56.         <div class="item">item8</div>
  57.     </div>
  58. </body>
  60. </html>
上一条：0319表格和表单下一条：【css入门】css盒模型及css定位的常用属性详解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多