search

博客列表 >flex容器中的四个属性的功能演示

flex容器中的四个属性的功能演示

加油2021
加油2021原创
2021年03月25日 22:54:08524浏览

实例演示flex容器中的四个属性的功能，参数，以及作用

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

flex-flow：主轴方向（row|colum） 是否换行（wrap|nowrap）

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

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

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

代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>flex</title>
  8.   </head>
  9.   <style>
  10.     :root {
  11.       font-size: 10px;
  12.     }
  13.     * {
  14.       padding: 0;
  15.       margin: 0;
  16.       box-sizing: border-box;
  17.     }
  18.     html {
  19.       font-size: 16px;
  20.     }
  21.     .content,
  22.     .content2,
  23.     .content3,
  24.     .content4,
  25.     .content5,
  26.     .content6 {
  27.       display: none !important;
  28.     }
  29.     .content {
  30.       display: flex;
  31.       /* 主轴水平方向 不换行 */
  32.       flex-flow: row nowrap;
  33.     }
  34.     .content2 {
  35.       margin-top: 10rem;
  36.       display: flex;
  37.       /* 主轴垂直方向 不换行 */
  38.       flex-flow: column nowrap;
  39.     }
  40.     .content3 {
  41.       margin-top: 10rem;
  42.       display: flex;
  43.       /* 主轴水平方向 换行 */
  44.       flex-flow: row wrap;
  45.     }
  46.     .content4 {
  47.       margin-top: 10rem;
  48.       display: flex;
  49.       /* 主轴垂直方向 换行 */
  50.       flex-flow: column wrap;
  51.       height: 20rem;
  52.     }
  53.     .content .item,
  54.     .content2 .item,
  55.     .content3 .item,
  56.     .content4 .item,
  57.     .content5 .item,
  58.     .content6 .item,
  59.     .content7 .item {
  60.       height: 5rem;
  61.       padding: 1rem;
  62.     }
  64.     .content5 {
  65.       display: flex;
  66.       /* 位于容器开头 */
  67.       justify-content: flex-start;
  68.       /* 位于容器的结尾 */
  69.       justify-content: flex-end;
  70.       /* 位于容器中间 */
  71.       justify-content: center;
  72.       /* 分散对齐 */
  73.       justify-content: space-around;
  74.       /* 两端对齐 */
  75.       justify-content: space-between;
  76.       /* 平均对齐 */
  77.       justify-content: space-evenly;
  78.     }
  80.     .content6 {
  81.       display: flex;
  82.       height: 20rem;
  83.       /* 默认会充满单行容器的高度 */
  84.       align-items: stretch;
  85.       /* 交叉轴的起点对齐 */
  86.       align-items: flex-start;
  87.       /* 交叉轴的终点对齐 */
  88.       align-items: flex-end;
  89.       /* 交叉轴的中点对齐 */
  90.       align-items: center;
  91.     }
  93.     .content7 {
  94.       display: flex;
  95.       height: 20rem;
  96.       flex-flow: row wrap;
  97.       /* 与交叉轴的起点对齐 */
  98.       align-content: flex-start;
  99.       /* 与交叉轴的终点对齐 */
  100.       align-content: flex-end;
  101.       /* 与交叉轴的中点对齐 */
  102.       align-content: center;
  103.       /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
  104.       align-content: space-between;
  105.       align-content: space-around;
  106.       align-content: stretch;
  107.     }
  108.   </style>
  109.   <body>
  110.     <!--  主轴水平方向 不换行  -->
  111.     <div class="content">
  112.       <div class="item">item1</div>
  113.       <div class="item">item2</div>
  114.       <div class="item">item3</div>
  115.       <div class="item">item4</div>
  116.     </div>
  117.     <!-- 主轴垂直方向 不换行  -->
  118.     <div class="content2">
  119.       <div class="item">item1</div>
  120.       <div class="item">item2</div>
  121.       <div class="item">item3</div>
  122.       <div class="item">item4</div>
  123.     </div>
  124.     <!-- 主轴水平方向 换行  -->
  125.     <div class="content3">
  126.       <div class="item">item1</div>
  127.       <div class="item">item2</div>
  128.       <div class="item">item3</div>
  129.       <div class="item">item4</div>
  130.       <div class="item">item5</div>
  131.       <div class="item">item6</div>
  132.       <div class="item">item7</div>
  133.       <div class="item">item8</div>
  134.       <div class="item">item9</div>
  135.     </div>
  136.     <!-- 主轴垂直方向 换行  -->
  137.     <div class="content4">
  138.       <div class="item">item1</div>
  139.       <div class="item">item2</div>
  140.       <div class="item">item3</div>
  141.       <div class="item">item4</div>
  142.       <div class="item">item5</div>
  143.       <div class="item">item6</div>
  144.       <div class="item">item7</div>
  145.       <div class="item">item8</div>
  146.       <div class="item">item9</div>
  147.     </div>
  149.     <!-- justify-content 属性 项目在主轴上的对齐方式  -->
  150.     <div class="content5">
  151.       <div class="item">item1</div>
  152.       <div class="item">item2</div>
  153.       <div class="item">item3</div>
  154.       <div class="item">item4</div>
  155.       <div class="item">item5</div>
  156.     </div>
  158.     <!-- align-items属性 项目在交叉轴上的对齐方式  -->
  159.     <div class="content6">
  160.       <div class="item">item1</div>
  161.       <div class="item">item2</div>
  162.       <div class="item">item3</div>
  163.       <div class="item">item4</div>
  164.       <div class="item">item5</div>
  165.     </div>
  167.     <!-- align-content属性 项目在多行容器中的对齐方式  -->
  168.     <div class="content7">
  169.       <div class="item">item1</div>
  170.       <div class="item">item2</div>
  171.       <div class="item">item3</div>
  172.       <div class="item">item4</div>
  173.       <div class="item">item5</div>
  174.       <div class="item">item6</div>
  175.       <div class="item">item7</div>
  176.     </div>
  177.   </body>
  178. </html>
上一条：CSS：选择器优先级、前端组件样式模块化原理实现、常用伪类选择器使用方式下一条：box-sizing 属性的功能，绝对定位，相对定位 ----0323
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多