search

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

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

JiaJieChen
JiaJieChen原创
2021年03月25日 15:57:322697浏览

flex容器中的四个属性的功能/参数

flex容器是具有：display：flex的属性元素
↓ 语法定义

  1.  <head>
  2.     <style type="text/css">
  3.         #box{
  4.             display: flex;
  5.         }
  6.     </style>
  7.   </head>
  8.   <body>
  9.       <div id="box"></div>
  10.   </body>

1.主轴方向与换行方式

元素 属性 含义
flex-flow row nowrap 默认的，主轴水平方向排列，不换行
flex-flow row wrap 主轴水平方向排列，进行换行
flex-flow column nowrap 主轴垂直方向排列，不换行
flex-flow column wrap 主轴垂直方向排列，进行换行
① flex-flow：row nowrap 演示

大家可以看到flex-flow：row nowrap参数，只要里面项目增加，里面原本的项目宽度就会被压缩，不会进行换行。

② flex-flow：row wrap 演示

大家可以看到flex-flow：row wrap参数，里面的项目增加了只要超过了原始设置好的宽度，那么这些项目就会进行系统自动换行，移植到下面。

③ flex-flow：column nowrap 演示

大家可以看到flex-flow：column nowrap参数，是垂直方向排列，里面项目增加，里面原本的项目宽度就会被压缩，不会进行换行。

④ flex-flow：column wrap 演示

大家可以看到flex-flow：column wrap参数，是垂直排列，会进行换行，原理都是一样的，只是排列方式不一样。

2.项目在主轴上的对齐方式

元素 属性 含义
justify-content flex-start 默认起始线
justify-content flex-end 终止线
justify-content center 居中
justify-content space-between 两端对齐
justify-content space-around 分散对齐
justify-content space-evenly 平均对齐
① justify-content：flex-start 演示

默认起始线，没有变化

② justify-content：flex-end 演示

大家可以看到justify-content：flex-end参数，把项目移动到了水平排列的终止线，也就是最底部。

③ justify-content：center 演示

大家可以看到justify-content：center参数，把项目移动到了水平线的中间部位，把项目居中了！

④ justify-content：space-between 演示

大家可以看到justify-space-between参数，把项目进行了两端对齐，除了最左边和最右边的外边距，其他的外边距大小都是一致的。

⑤ justify-content：space-around 演示

大家可以看到justify-space-around参数，把项目进行了分散对齐。

⑥ justify-content：space-evenly 演示

大家可以看到justify-space-space-evenly参数，把项目进行了平均对齐，左右的外边距都是一样的。

3.项目在交叉轴的对齐方式

元素 属性 含义
align-items stretch 默认拉伸
align-items flex-start 起始线
align-items flex-end 终止线
align-items center 居中
① align-items stretch 演示

大家可以看到align-items stretch参数，默认在垂直方向是拉伸的。

② align-items flex-start 演示

大家可以看到align-items flex-start参数，上面可以看到垂直方向默认是拉伸的，用flex-start把项目的垂直方向设置在起始线，可以看到变短了。

③ align-items flex-end 演示

大家可以看到align-items flex-end参数，把项目设置在垂直方向终点线上，也就是最下面。

④ align-items center 演示

大家可以看到align-items center参数，把项目定位在了垂直方向的中间部位，把项目居中了。

4.项目在多行容器交叉轴上的对齐方式

元素 属性 含义
align-content flex-start 起始线
align-content flex-end 终止线
align-content stretch 默认拉伸
align-content center 居中
① align-content flex-start 演示

大家可以看到align-content flex-start参数，把多行项目都定位到了起始线上。下面几个参数原理都一样，就不一一演示了，下面来讲一下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 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.       }
  23.       /* 定义一个flex容器
  24.       #box {
  25.         border: 1px solid;
  26.         width: 30em;
  27.         height: 30em;
  28.          转变为flex容器
  29.         display: flex;
  30.         设置为水平方向排列，不换行元素
  31.         flex-flow: row nowrap;
  32.       }*/
  34.       /* #box {
  35.          border: 1px solid;
  36.         width: 30em;
  37.         height: 30em;
  38.         display: flex;
  39.          设置为水平方向排列，会进行换行
  40.         flex-flow: row wrap;
  41.       } */
  43.       /* #box {
  44.         width: 30em;
  45.         height: 30em;
  46.         display: flex;
  47.         设置为垂直方向排列，不会进行换行
  48.         flex-flow: column nowrap;
  49.       } */
  51.       /* #box {
  52.         width: 30em;
  53.         height: 30em;
  54.         display: flex;
  55.         设置为垂直方向排列，会进行换行
  56.         flex-flow: column wrap;
  57.       } */
  59.       /* #box {
  60.         width: 30em;
  61.         height: 30em;
  62.         display: flex;
  63.         设置项目在主轴上的对齐方式，默认起始线。
  64.         justify-content: flex-start;
  65.       } */
  67.       /* #box {
  68.         width: 30em;
  69.         height: 30em;
  70.         display: flex;
  71.         设置项目在主轴上的对齐方式，终止线。
  73.         justify-content: flex-end;
  74.       } */
  76.       /* #box {
  77.         width: 30em;
  78.         height: 30em;
  79.         display: flex;
  80.         设置项目在主轴上的对齐方式，居中。
  82.         justify-content: center;
  83.       } */
  85.       /* #box {
  86.         width: 30em;
  87.         height: 30em;
  88.         display: flex;
  89.         设置项目在主轴上的对齐方式，两端对齐。
  91.         justify-content: space-between;
  92.       } */
  94.       /* #box {
  95.         width: 30em;
  96.         height: 30em;
  97.         display: flex;
  98.         设置项目在主轴上的对齐方式，分散对齐。
  100.         justify-content: space-around;
  101.       } */
  103.       /* #box {
  104.         width: 30em;
  105.         height: 30em;
  106.         display: flex;
  107.         设置项目在主轴上的对齐方式，平均对齐。
  109.         justify-content: space-evenly;
  110.       } */
  111.       /*
  112.       #box {
  113.         width: 30em;
  114.         height: 30em;
  115.         display: flex;
  116.         设置项目在交叉轴的对齐方式，默认拉伸。
  118.         align-items: stretch;
  119.       } */
  121.       /* #box {
  122.         width: 30em;
  123.         height: 30em;
  124.         display: flex;
  125.         设置项目在交叉轴的对齐方式，起始线。
  127.         align-items: flex-start;
  128.       } */
  130.       /* #box {
  131.         width: 30em;
  132.         height: 30em;
  133.         display: flex;
  134.         设置项目在交叉轴的对齐方式，终止线。
  136.         align-items: flex-end;
  137.       } */
  139.       /* #box {
  140.         width: 30em;
  141.         height: 30em;
  142.         display: flex;
  143.         设置项目在交叉轴的对齐方式，居中。
  145.         align-items: center;
  146.       } */
  148.       #box {
  149.         width: 30em;
  150.         height: 30em;
  151.         display: flex;
  152.         /* 设置项目在多行容器交叉轴上的对齐方式，起始线。 */
  153.         flex-flow: row wrap;
  154.         align-content: flex-start;
  155.       }
  157.       #box > .boxder {
  158.         border: 1px solid;
  160.         background: lightgreen;
  161.         width: 5em;
  162.         height: 5em;
  163.       }
  164.     </style>
  165.   </head>
  166.   <body>
  167.     <div id="box">
  168.       <div class="boxder">项目1</div>
  169.       <div class="boxder">项目2</div>
  170.       <div class="boxder">项目3</div>
  171.       <div class="boxder">项目4</div>
  172.       <div class="boxder">项目5</div>
  173.       <div class="boxder">项目6</div>
  174.       <div class="boxder">项目7</div>
  175.       <div class="boxder">项目8</div>
  176.       <div class="boxder">项目9</div>
  177.       <div class="boxder">项目10</div>
  178.     </div>
  179.   </body>
  180. </html>

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>flex简单实现让项目居中</title>
  8.     <style type="text/css">
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       #box1 {
  13.         border: 1px solid;
  14.         width: 25em;
  15.         height: 25em;
  16.         background: lightpink;
  17.         /* 设为flex容器 */
  18.         display: flex;
  19.         /* 让这个项目在水平线上居中 */
  20.         justify-content: center;
  21.         /* 让这个项目在交叉轴上居中 */
  22.         align-items: center;
  23.       }
  24.       #box2 {
  25.         border: 1px solid;
  26.         width: 15em;
  27.         height: 15em;
  28.         background: limegreen;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div id="box1">
  34.       <div id="box2"></div>
  35.     </div>
  36.   </body>
  37. </html>
上一条：万岳教育直播源码,教育app源码,教育系统源码下一条：php类的引用与mysql基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多