search

博客列表 >flex元素常用属性

flex元素常用属性

一代宗师
一代宗师原创
2021年02月24日 19:32:31600浏览

弹性容器与弹性项目

1.任何元素都可以通过display:flex属性来转换为弹性盒子元素
2.使用display:flex属性的元素叫flex容器
3.flex容器中的元素叫做flex项目
4.flex容器中的flex项目都会变成行内块元素
5.转变为flex元素后，它内部子元素就支持flex布局

  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>弹性容器与弹性项目</title>
  8.     <style>
  9.         *{box-sizing: border-box;}
  10.         .main{
  11.             display: flex;
  12.             border: 1px solid;
  13.             height: 20em;
  15.         }
  16.         .main>.imt{
  17.             border: 1px solid;
  18.             width: 10em;
  19.             height: 8em;
  20.         }
  21.     </style>
  23. </head>
  24. <body>
  26.     <div class="main">
  27.         <div class="imt">imt1</div>
  28.         <div class="imt">imt2</div>
  29.         <div class="imt">imt3</div>
  30.     </div>
  31. </body>
  32. </html>

flex排列方式

  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.     <style>
  9.         *{
  10.             box-sizing: border-box;
  11.         }
  12.         .main{
  13.             display: flex;
  14.             height: 15em;
  15.             border: 1px solid;
  16.         }
  17.         /* 单行排列 */
  18.         .text{
  19.             width: 5em;
  20.             border: 1px solid;
  22.         }
  23.         .main{
  24.             flex-flow: row nowrap;
  25.         }
  26.         /* 多行排列 */
  27.         .text{
  28.             width: 5em;
  29.             height: 5em;
  30.             border: 1px solid;
  32.         }
  33.         .main{
  34.             flex-flow: row wrap;
  35.         }
  36.         /* 主轴为列 */
  37.         .text{
  38.             width: 5em;
  39.             height: 5em;
  40.             border: 1px solid;
  42.         }
  43.         .main{
  44.             flex-flow: column nowrap;
  45.         }
  47.          /*列换行  */
  48.          .text{
  49.             width: 5em;
  50.             height: 5em;
  51.             border: 1px solid;
  53.         }
  54.         .main{
  55.             flex-flow: column wrap;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60.     <div class="main">
  61.         <div class="text">text1</div>
  62.         <div class="text">text2</div>
  63.         <div class="text">text3</div>
  64.         <div class="text">text4</div>
  65.         <div class="text">text5</div>
  66.         <div class="text">text6</div>
  67.         <div class="text">text7</div>
  68.         <div class="text">text8</div>
  69.     </div>
  70. </body>
  71. </html>

弹性项目在主轴上的排列方式

  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>弹性项目在主轴上的排列方式</title>
  8.     <style>
  9.         *{box-sizing: border-box;}
  10.         .main{
  11.             display: flex;
  12.             height: 10em;
  13.             border: 1px solid;
  14.         }
  15.         .text{
  16.             width: 4em;
  17.             /* height: 2em; */
  18.             border: 1px solid;
  19.         }
  20.         /* 设置在单行容器上对齐前提：主轴上存在剩余空间 */
  21.         /* 空间分配有两种 */
  22.         /* 1.将所有项目视为一体，在项目两边进行分配 */
  23.         .main{
  24.             justify-content: center;
  25.             justify-content: flex-start;
  26.             justify-content: flex-end;
  27.         }
  28.         /* 2.将项目分为一个个独立的个体，在项目之间分配 */
  29.         .main{
  30.             /* 分散对齐 */
  31.             justify-content: space-around;
  32.             /* 两端对齐 */
  33.             justify-content: space-between;
  34.             /* 平均对齐 */
  35.             justify-content: space-evenly;
  37.         }
  38.         /* 交叉轴对齐方式 */
  39.         .main{
  40.             /* 默认拉伸 */
  41.             align-items: stretch;
  42.             /* 顶部对齐 */
  43.             align-items: flex-start;
  44.             /* 底部对齐 */
  45.             align-items: flex-end;
  46.             /* 居中 */
  47.             align-items: center;
  48.         }
  49.         /* 注意:单行容器切项目在主轴排列,交叉轴不存在适应空间.原因是单行容器,在交叉轴上只有一行没有多行 */
  50.     </style>
  51. </head>
  52. <body>
  53.     <div class="main">
  54.         <div class="text">text1</div>
  55.         <div class="text">text2</div>
  56.         <div class="text">text3</div>
  57.         <div class="text">text4</div>
  59.     </div>
  60. </body>
  61. </html>

flex对齐方式

  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.     <style>
  9.         *{box-sizing: border-box;}
  10.         .main{
  11.             display: flex;
  12.             height: 10em;
  13.             border: 1px solid;
  14.         }
  15.         .text{
  16.             width: 4em;
  17.             height: 2em;
  18.             border: 1px solid;
  19.         }
  20.         /* 设置在单行容器上对齐前提：主轴上存在剩余空间 */
  21.         /* 空间分配有两种 */
  22.         /* 1.将所有项目视为一体，在项目两边进行分配 */
  23.         .main{
  24.            flex-flow: row wrap;
  25.         }
  26.         .main{
  27.             align-content: center;
  28.             align-content: flex-start;
  29.             align-content: flex-end;
  31.             align-content: space-around;
  32.             align-content: space-between;
  33.             align-content: space-evenly;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <div class="main">
  39.         <div class="text">text1</div>
  40.         <div class="text">text2</div>
  41.         <div class="text">text3</div>
  42.         <div class="text">text4</div>
  43.         <div class="text">text5</div>
  44.         <div class="text">text6</div>
  45.         <div class="text">text7</div>
  46.         <div class="text">text8</div>
  47.         <div class="text">text9</div>
  48.         <div class="text">text10</div>
  49.         <div class="text">text11</div>
  50.         <div class="text">text12</div>
  51.         <div class="text">text1</div>
  52.         <div class="text">text2</div>
  53.         <div class="text">text3</div>
  54.         <div class="text">text4</div>
  55.         <div class="text">text5</div>
  56.         <div class="text">text6</div>
  57.         <div class="text">text7</div>
  58.         <div class="text">text8</div>
  59.         <div class="text">text9</div>
  60.         <div class="text">text10</div>
  61.         <div class="text">text11</div>
  62.         <div class="text">text12</div>
  64.     </div>
  65. </body>
  66. </html>
上一条：类的重载与命名空间下一条：PHP基础: 命名空间的引入方式和自动加载类、附加:mysql的一些基础命令
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多