Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局：flex容器中的四个属性的功能，参数，以及作用
Blogger Information
Blog 52
fans 1
comment 1
visits 38781
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex布局：flex容器中的四个属性的功能，参数，以及作用
小丑0o鱼
Original
787 people have browsed it
  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>
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post