什么是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>

更多相关文章

  1. css-flex布局
  2. 3.24实例演示flex容器中的四个属性的功能，参数，以及作用
  3. css之flex容器
  4. 0324作业-flex布局
  5. flex布局：flex容器中的四个属性的功能，参数，以及作用
  6. 圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式
  7. flex 基础
  8. grid对齐方式以及简单实战
  9. flex容器的认识

随机推荐

  1. Cordova 低版本安卓白屏
  2. Android 开发环境安装 新版本Android Stu
  3. 《第一行代码——Android》
  4. Android获取其他包的Context实例
  5. android 的权限
  6. 【MonkeyRunner】eclipse中编写monkeyrun
  7. Android中的线程
  8. 【Android】Conversion to Dalvik format
  9. 匿名类中this的特殊用法(class.this)
  10. Android JNI 之 Bitmap 操作