search

博客列表 >flex容器中的四个属性

flex容器中的四个属性

L.E
L.E原创
2021年04月05日 13:40:08587浏览

flex 容器的四个属性：

序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-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>
上一条：函数作用域与闭包-回调函数-函数的多值返回类型方式下一条：【JS基础入门】JavaScript基础之作用域、闭包、迭代器、构造函数、原型链、类与继承等知识点笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议