flex 容器的四个属性：

序号属性描述
1flex-flow主轴方向与换行方式
2justify-content项目在主轴上的对齐方式
3align-items项目在交叉轴上的对齐方式
4align-content项目在多行容器中的对齐方式

flex-flow 主轴方向与换行方式

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性项目在主轴上的排列方式</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         /* 为了布局，方便后面使用rem计算 */
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  19.       .container {
  20.         /* 转为flex布局，这个元素就叫flex容器，弹性容器 */
  21.         display: flex;
  23.         height: 25rem;
  24.         border: 1px solid;
  25.       }
  27.       /* 项目样式：必须是flex容器的子元素 */
  28.       /* flex容器中的子元素自动成flex容器的项目，并且是行内块显示，项目自动和当前容器等高 */
  29.       .container > .item {
  30.         /* padding: 2rem; */
  31.         background-color: cornflowerblue;
  32.         border: 1px solid;
  33.         width: 12rem;
  34.         height: 5rem;
  35.       }
  37.       /* 1.单行容器 */
  38.       .container {
  39.         /* 主轴方向：默认水平，行 */
  40.         /* flex-direction: row; */
  41.         /* 禁止换行 */
  42.         /* flex-wrap: nowrap; */
  43.         /* 简化 */
  44.         /* flex-flow: 主轴方向 是否换行; */
  45.         flex-flow: row nowrap;
  46.       }
  48.       /* 2.多行容器 */
  49.       .container {
  50.         /* 允许换行 */
  51.         /* flex-flow: row wrap; */
  53.         /* 主轴垂直 */
  54.         /* flex-flow: column nowrap; */
  55.         /* flex-flow: column wrap; */
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <div class="container">
  61.       <div class="item">item1</div>
  62.       <div class="item">item2</div>
  63.       <div class="item">item3</div>
  64.       <div class="item">item4</div>
  65.       <div class="item">item5</div>
  66.       <div class="item">item6</div>
  67.       <div class="item">item7</div>
  68.     </div>
  69.   </body>
  70. </html>

justify-content 项目在主轴上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性项目在主轴上的排列方式</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         /* 为了布局，方便后面使用rem计算 */
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  19.       .container {
  20.         /* 转为flex布局，这个元素就叫flex容器，弹性容器 */
  21.         display: flex;
  23.         height: 25rem;
  24.         border: 1px solid;
  25.       }
  27.       /* 项目样式：必须是flex容器的子元素 */
  28.       .container > .item {
  29.         background-color: cornflowerblue;
  30.         border: 1px solid;
  31.         width: 12rem;
  32.         height: 5rem;
  33.       }
  35.       /* 设置项目在主轴的对齐方式的前提是：主轴上存在剩余空间 */
  36.       .container {
  37.         /* 项目在主轴上的对齐方式：justify-content */
  38.         /* 1.将所有项目看成一个整体来处理 */
  39.         justify-content: flex-start;
  40.         justify-content: flex-end;
  41.         justify-content: center;
  43.         /* 2.将所有项目看成一个个独立的个体来处理 */
  44.         /* 两端对齐 */
  45.         justify-content: space-between;
  46.         /* 分散对齐 */
  47.         justify-content: space-around;
  48.         /* 平均对齐 */
  49.         justify-content: space-evenly;
  50.       }
  52.       /* justify-content：项目在主轴上的对齐方式 */
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <div class="container">
  57.       <div class="item">item1</div>
  58.       <div class="item">item2</div>
  59.       <div class="item">item3</div>
  60.       <div class="item">item4</div>
  61.     </div>
  62.   </body>
  63. </html>

align-items 项目在交叉轴上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性项目在交叉轴上的排列方式</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         /* 为了布局，方便后面使用rem计算 */
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  19.       .container {
  20.         /* 转为flex布局，这个元素就叫flex容器，弹性容器 */
  21.         display: flex;
  23.         height: 25rem;
  24.         border: 1px solid;
  25.       }
  27.       /* 项目样式：必须是flex容器的子元素 */
  28.       .container > .item {
  29.         background-color: cornflowerblue;
  30.         border: 1px solid;
  31.         width: 12rem;
  32.         height: 5rem;
  33.       }
  35.       /* 项目在交叉轴上的对齐方式：align-items */
  36.       .container {
  37.         align-items: stretch;
  38.         align-items: flex-start;
  39.         align-items: flex-end;
  40.         align-items: center;
  41.       }
  43.       /* align-items：项目在交叉轴上的对齐方式 */
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="container">
  48.       <div class="item">item1</div>
  49.       <div class="item">item2</div>
  50.       <div class="item">item3</div>
  51.       <div class="item">item4</div>
  52.     </div>
  53.   </body>
  54. </html>

align-content 项目在多行容器中的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性项目在多行容器中主轴上的对齐方式</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         /* 为了布局，方便后面使用rem计算 */
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  19.       .container {
  20.         /* 转为flex布局，这个元素就叫flex容器，弹性容器 */
  21.         display: flex;
  23.         height: 25rem;
  24.         border: 1px solid;
  25.       }
  27.       /* 项目样式：必须是flex容器的子元素 */
  28.       .container > .item {
  29.         background-color: cornflowerblue;
  30.         border: 1px solid;
  31.         width: 12rem;
  32.         height: 5rem;
  33.       }
  35.       /* 转为多行容器  */
  36.       .container {
  37.         flex-flow: row wrap;
  38.         /* 多行容器中对齐时，主轴是没有剩余空间 */
  39.         /* 换行后，需要设置对齐方式，要求交叉轴上必须要有剩余空间 */
  40.         align-content: stretch;
  42.         /* 将交叉轴上所有项目看成一个整体 */
  43.         align-content: flex-start;
  44.         align-content: flex-end;
  45.         align-content: center;
  47.         /* 看成个体 */
  48.         /* 两端对齐 */
  49.         align-content: space-between;
  50.         /* 分散对齐 */
  51.         align-content: space-around;
  52.         /* 平均对齐 */
  53.         align-content: space-evenly;
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <div class="container">
  59.       <div class="item">item1</div>
  60.       <div class="item">item2</div>
  61.       <div class="item">item3</div>
  62.       <div class="item">item4</div>
  63.       <div class="item">item5</div>
  64.       <div class="item">item6</div>
  65.       <div class="item">item7</div>
  66.       <div class="item">item8</div>
  67.       <div class="item">item9</div>
  68.       <div class="item">item10</div>
  69.       <div class="item">item11</div>
  70.     </div>
  71.   </body>
  72. </html>

更多相关文章

  1. Android中的FILL_PARENT与WRAP_CONTENT的区别
  2. AndRoid完全退出程序
  3. Android(安卓)自定义水平滚动的容器
  4. 布局概述之相对布局RelativeLayout
  5. Android中使用ViewPager制作广告栏滚屏效果
  6. Android中使用ViewPager制作广告栏滚屏效果
  7. Android中使用ViewPager制作广告栏滚屏效果
  8. 从零开始打造一个Android(安卓)3D立体旋转容器
  9. 自定义View系列教程02--onMeasure源码详尽分析

随机推荐

  1. Installation error: INSTALL_FAILED_VER
  2. Android 开源项目
  3. ImageView的属性android:scaleType，即Imag
  4. Android为每个应用程序分配的内存大小是
  5. Android P 默认壁纸被拉伸
  6. 2013.07.12(2)——— android juv-rtmp-c
  7. Android拍照上传至PHP服务器并写入MySql
  8. Android进程与线程基本知识四
  9. Android(安卓)- ToDoList(定制ArrayAdapt
  10. cordova Android Platform Guide