search

博客列表 >flex布局：flex容器中的四个属性的功能，参数，以及作用

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

小丑0o鱼
小丑0o鱼原创
2021年07月20日 19:38:58788浏览
  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 type="text/css">
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* 设置元素html字体为10px */
  15.       :root {
  16.         font-size: 10px;
  17.       }
  18.       /* body字体为16px */
  19.       body {
  20.         font-size: 1.6rem;
  21.       }
  22.       /* 定义一个flex容器
  23.       #box {
  24.         border: 1px solid;
  25.         width: 30em;
  26.         height: 30em;
  27.          转变为flex容器
  28.         display: flex;
  29.         设置为水平方向排列，不换行元素
  30.         flex-flow: row nowrap;
  31.       }*/
  32.       /* #box {
  33.          border: 1px solid;
  34.         width: 30em;
  35.         height: 30em;
  36.         display: flex;
  37.          设置为水平方向排列，会进行换行
  38.         flex-flow: row wrap;
  39.       } */
  40.       /* #box {
  41.         width: 30em;
  42.         height: 30em;
  43.         display: flex;
  44.         设置为垂直方向排列，不会进行换行
  45.         flex-flow: column nowrap;
  46.       } */
  47.       /* #box {
  48.         width: 30em;
  49.         height: 30em;
  50.         display: flex;
  51.         设置为垂直方向排列，会进行换行
  52.         flex-flow: column wrap;
  53.       } */
  54.       /* #box {
  55.         width: 30em;
  56.         height: 30em;
  57.         display: flex;
  58.         设置项目在主轴上的对齐方式，默认起始线。
  59.         justify-content: flex-start;
  60.       } */
  61.       /* #box {
  62.         width: 30em;
  63.         height: 30em;
  64.         display: flex;
  65.         设置项目在主轴上的对齐方式，终止线。
  66.         justify-content: flex-end;
  67.       } */
  68.       /* #box {
  69.         width: 30em;
  70.         height: 30em;
  71.         display: flex;
  72.         设置项目在主轴上的对齐方式，居中。
  73.         justify-content: center;
  74.       } */
  75.       /* #box {
  76.         width: 30em;
  77.         height: 30em;
  78.         display: flex;
  79.         设置项目在主轴上的对齐方式，两端对齐。
  80.         justify-content: space-between;
  81.       } */
  82.       /* #box {
  83.         width: 30em;
  84.         height: 30em;
  85.         display: flex;
  86.         设置项目在主轴上的对齐方式，分散对齐。
  87.         justify-content: space-around;
  88.       } */
  89.       /* #box {
  90.         width: 30em;
  91.         height: 30em;
  92.         display: flex;
  93.         设置项目在主轴上的对齐方式，平均对齐。
  94.         justify-content: space-evenly;
  95.       } */
  96.       /*
  97.       #box {
  98.         width: 30em;
  99.         height: 30em;
  100.         display: flex;
  101.         设置项目在交叉轴的对齐方式，默认拉伸。
  102.         align-items: stretch;
  103.       } */
  104.       /* #box {
  105.         width: 30em;
  106.         height: 30em;
  107.         display: flex;
  108.         设置项目在交叉轴的对齐方式，起始线。
  109.         align-items: flex-start;
  110.       } */
  111.       /* #box {
  112.         width: 30em;
  113.         height: 30em;
  114.         display: flex;
  115.         设置项目在交叉轴的对齐方式，终止线。
  116.         align-items: flex-end;
  117.       } */
  118.       /* #box {
  119.         width: 30em;
  120.         height: 30em;
  121.         display: flex;
  122.         设置项目在交叉轴的对齐方式，居中。
  123.         align-items: center;
  124.       } */
  125.       #box {
  126.         width: 30em;
  127.         height: 30em;
  128.         display: flex;
  129.         /* 设置项目在多行容器交叉轴上的对齐方式，起始线。 */
  130.         flex-flow: row wrap;
  131.         align-content: flex-start;
  132.       }
  133.       #box > .boxder {
  134.         border: 1px solid;
  135.         background: lightgreen;
  136.         width: 5em;
  137.         height: 5em;
  138.       }
  139.     </style>
  140.   </head>
  141.   <body>
  142.     <div id="box">
  143.       <div class="boxder">项目1</div>
  144.       <div class="boxder">项目2</div>
  145.       <div class="boxder">项目3</div>
  146.       <div class="boxder">项目4</div>
  147.       <div class="boxder">项目5</div>
  148.       <div class="boxder">项目6</div>
  149.       <div class="boxder">项目7</div>
  150.       <div class="boxder">项目8</div>
  151.       <div class="boxder">项目9</div>
  152.       <div class="boxder">项目10</div>
  153.     </div>
  154.   </body>
  155. </html>
  156. flex简单实现让项目居中
  159. 怎么样很简单吧？几行代码搞定。不像之前的定位要设置很多参数，使用flex布局会更加的简洁方便！
  161. 代码块
  162. <!DOCTYPE html>
  163. <html lang="en">
  164.   <head>
  165.     <meta charset="UTF-8" />
  166.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  167.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  168.     <title>flex简单实现让项目居中</title>
  169.     <style type="text/css">
  170.       * {
  171.         box-sizing: border-box;
  172.       }
  173.       #box1 {
  174.         border: 1px solid;
  175.         width: 25em;
  176.         height: 25em;
  177.         background: lightpink;
  178.         /* 设为flex容器 */
  179.         display: flex;
  180.         /* 让这个项目在水平线上居中 */
  181.         justify-content: center;
  182.         /* 让这个项目在交叉轴上居中 */
  183.         align-items: center;
  184.       }
  185.       #box2 {
  186.         border: 1px solid;
  187.         width: 15em;
  188.         height: 15em;
  189.         background: limegreen;
  190.       }
  191.     </style>
  192.   </head>
  193.   <body>
  194.     <div id="box1">
  195.       <div id="box2"></div>
  196.     </div>
  197.   </body>
  198. </html>
上一条：Jquery 与 原生 js的对比下一条：仿jd手机端
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多