Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 什么是flex布局，它的常用属性有哪些
Blogger Information
Blog 16
fans 0
comment 0
visits 16741
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布局，它的常用属性有哪些
刚哥哥
Original
3155 people have browsed it

什么是flex 布局；

flex是 flexible box 的缩写，就是弹性布局的意思。

任何一个元素（块元素、行内块元素、行内元素），都可以设置为弹性盒子属性。

语法：块元素： display:flex; 行内元素：display:inline-flex;

注意：webkit 内核的浏览器，须要加上 -webkit 前缀；

  1. 须要注意的是：设置为flex 布局后，子元素 的 clear（清除浮动）、float（浮动）和vertical-align（垂直对齐方式）属性将失效；

flex布局的基本概念：

  1. 设置为flex布局的元素，称为flex容器，它的所有子元素就是容器成员，被称为项目。

flex容器默认有两个轴：

水平主轴（main axis）和垂直交叉轴（cross axis）。

  1. 主轴的开始位置叫做 main start(与容器边框的交叉点)，结束位置叫做 main end;
  2. 交叉轴的开始位置叫做cross start,结束位置叫做 cross end;

项目（容器成员）默认沿着主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size;

容器的属性：

1、flex-direction 设置项目的排列方向；

值：

  1. row (默认值)：主轴为水平方向，起点在左端；
  2. row-reverse: 主轴为水平方向，起点在右端；
  3. column：主轴为垂直方向，起点在上端。
  4. column-reverse: 主轴为垂直方向，起点在下端。

2、flex-wrap 设置项目换行方式；

值：

  1.  nowrap(默认值) ：不换换；
  2. wrap ：换行，第一行在上方；
  3. wrap-reverse: 换行，第一行在下方；

3、flex-flow（常用，设置主轴方向和换行方式）

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

值；

  1. row（默认值）：
  2. row-reverse：
  3. column：
  4. column-reverse
  5. nowrap | wrap | wrap-reverse

4、justify-content ：（常用）定义项目在主轴上的对齐方式。

值： 

  1. flex-start（默认值）：左对齐
  2. flex-end：右对齐
  3. center： 居中
  4. space-between：两端对齐，项目之间的间隔都相等。
  5. space-around：每个项目两侧的间隔相等。所以，项目之间的间    隔比项目与边框的间隔大一倍。

5、align-items： 定义项目在交叉轴上的对齐方式；

值：

  1. flex-start：交叉轴的起点对齐。
  2. flex-end：交叉轴的终点对齐。
  3. center：交叉轴的中点对齐。
  4. baseline: 项目的第一行文字的基线对齐。
  5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6、align-content ：定义项目在多行容器中的对齐方式；如果项目只有一行容器，该属性不起作用。

值：

  1. flex-start：与交叉轴的起点对齐。
  2. flex-end：与交叉轴的终点对齐。
  3. center：与交叉轴的中点对齐。
  4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间    隔大一倍。
  6. stretch（默认值）：轴线占满整个交叉轴。

项目的属性：

1、order属性；定义项目在主轴上的排列顺序；

  1. 语法： *{order: 1}数字1是根据需求自己定义的值，填写整数，*表示须要设置排序的项目；

2、flex属性：定义项目的缩放比例与基准款宽；

  1. 是 flex-grow/flex-shrink/flex-basis的简写，默认值为0 1 auto,后面2各属性可选；
  2. flex属性有两个快捷值： none和auto（none表示0 0 auto）(auto表示1 1 auto)

3、align-self: 定义单个项目在交叉轴上的对齐方式；可覆盖align-items属性。

  1. 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

4、flex-grow属性

  1. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  2. flex-grow:1;默认值为0；

5、flex-shrink属性

  1. flex-shrink：属性定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

6、flex-basis属性

  1. flex-basis属性定义项目在分配多余空间之前，项目占据的主轴空间（main size）。浏览    器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  3. 语法：
  4.     .项目 {
  5.           flex-basis: <length> | auto; /* default auto */
  6.     }
  7. 它可以设为跟width或height属性一样的值（比如500px），则项目将占据固定空间。

代码练习：

  1.  <title>flex布局示例代码</title>
  2.     <style>
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.             box-sizing: border-box;
  7.         }
  9.         .rongqi {
  10.             width: 480px;
  11.             height: 180px;
  12.             background-color: skyblue;
  13.             display: flex;
  14.             /* 设置项目排列方式 */
  15.             /*  flex-direction    
  16.               row（默认值）：主轴为水平方向，起点在左端。
  17.             row-reverse：主轴为水平方向，起点在右端。
  18.             column：主轴为垂直方向，起点在上沿。
  19.             column-reverse：主轴为垂直方向，起点在下沿。 */
  21.             /* flex-direction: row;
  22.             flex-direction:row-reverse;
  23.             flex-direction: column-reverse;
  24.             flex-direction: column; */
  26.             /* 设置项目换行方式 */
  27.             /* flex-wrap */
  28.             /*   nowrap： 默认值 不换行
  29.             wrap：换行，第一行上方（向下换行）
  30.             wrap-reverse: 换行，第一行在下方（向上换行） */
  31.             /*  flex-wrap:wrap;
  32.             flex-wrap: nowrap;
  33.             flex-wrap: wrap-reverse; */
  35.             /* 设置主轴方向与换行方式 */
  37.             /* flex-flow */
  38.             /* 垂直（起点在下方），换行 */
  39.             /* flex-flow:column wrap; */
  40.             /* 水平从左往右排，不换行 */
  41.             /* flex-flow: row nowrap; */
  42.             /* 垂直（起点在上方），不换行 */
  43.             /* flex-flow:column nowrap; */
  45.             /* 设置项目在主轴上的对齐方式 */
  46.             /* justify-content:  */
  47.             /* 从左往右排并且对齐，默认值 */
  48.             /* justify-content: flex-start; */
  49.             /* 从右往左排 并且对齐*/
  50.             /* justify-content: flex-end; */
  51.             /* 居中排列 */
  52.             /* justify-content: center; */
  53.             /* 两端对齐，并且项目之间的间隔都相等 */
  54.             /* justify-content: space-between; */
  55.             /* 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍 */
  56.             /* justify-content: space-around; */
  58.             /* 设置项目在交叉轴上的对齐方式 */
  59.             /* align-items */
  60.             /* flex-start 从交叉轴的起点对齐 */
  61.             /* align-items: flex-start; */
  62.             /* flex-end 从交叉轴的终点对齐 */
  63.             /* align-items: flex-end; */
  64.             /* center 从交叉轴的中间点对齐 */
  65.             /* align-items: center; */
  66.             /* flex-start 从交叉轴的起点对齐 */
  67.             /* baseline 从项目的第一行文字基线对齐 */
  68.             /* align-items: baseline; */
  69.             /* 默认值，如果项目没有设置高度或者设置为auto时，将占满整个容器高度 */
  70.             /* align-items:stretch; */
  73.             /* 设置项目在多行容器中的对齐方式 */
  74.             /* align-content:; */
  75.             /* 与交叉轴的起点对齐 */
  76.             /* align-content: flex-start; */
  77.             /* 与交叉轴的终点对齐 */
  78.             /* align-content:flex-end; */
  79.             /* 与交叉轴的中间点对齐 */
  80.             /* align-content: center; */
  81.             /* 与交叉轴的两端（上下/左右）对齐，轴线之间的间隔平均分布 */
  82.             /* flex-flow:column wrap; */
  83.             /* align-content:space-between; */
  84.             /* 每根轴线（水平）上下两侧的间隔相等，靠边框的一侧的间隔是轴线之间的间隔的一半 */
  85.             /* align-content: space-around; */
  86.             /* 占满整个交叉轴，默认值 */
  87.             /* align-content: stretch; */
  88.             /* 允许换行 */
  89.             /* flex-wrap: wrap; */
  90.             /* 设置主轴为水平方向 */
  91.             flex-flow: row wrap;
  96.         }
  98.         .rongqi .xiangmu {
  99.             width: 60px;
  100.             height: 60px;
  101.             background-color: red;
  102.             border: 1px solid violet;
  106.         }
  108.         /* 项目属性 */
  109.         /* 项目属性有：
  110.          order（排序、默认为零，数字越小排名越靠前，可以为负数）
  111.          flex-grow（定义项目的放大比例，默认为0，即如果存在剩余空间也不放大）
  112.          flex-shrink（定义项目的缩小比例，默认为1，即如果空间不足，该项目将自动缩小）
  113.          flex-basis（定义项目在分配多余空间之前，项目占据的主轴空间（main size）,浏览器根据这个属性，计算主轴是否有多
  114.                     余空间，它的默认值为auto,即项目原本的大小。值可以设置根宽高一样的值，这样它的空间会被固定）
  115.          flex（这属性最常用，flex是 flex-frow、flex-shrink、flex-basis的简写语法，默认值为(0 1 auto),后面两个属性可选，
  116.                     快捷值：[auto（1 1 auto）、none (0 0 auto)]语法：flex：flex-grow flex-shrink flex-basis;
  117.          align-self（设置单个项目的对齐方式（与其它项目的对齐方式不一样，个性化定制对齐方式）可以覆盖align-itmes属性。默认
  118.                     值为 auto,即继承父元素的align-itmes属性，如果没有父元素，则等同于stretch(占满整个容器高度)） */
  119.         /* 排列顺序 */
  120.         /* .rongqi .xiangmu:first-of-type {
  121.             order: 2;
  122.         }
  124.         .rongqi .xiangmu:nth-of-type(2) {
  125.             order: 3;
  126.         }
  128.         .rongqi .xiangmu:nth-of-type(5) {
  129.             order: -1;
  130.         } */
  131.         /* 放大比例,0为默认，有剩余也不放大;都为1 有剩余空间 等分;某个项目为2，其它为1，为2的项目不为1的项目多占1倍的空间 */
  134.         /*  .rongqi .xiangmu:nth-of-type(1) {
  135.             flex-grow: 0;
  136.              flex-grow: 1; 
  137.         }
  139.         .rongqi .xiangmu:nth-of-type(3) {
  140.             flex-grow: 0;
  141.              flex-grow: 1; 
  142.         }
  144.         .rongqi .xiangmu:nth-of-type(2) {
  145.             flex-grow: 2;
  146.              flex-grow: 1; 
  147.         } */
  149.         /* 定义项目缩小比例，默认为1，即如果空间不足，该项目将缩小，通过设置值来控制项目是否缩小，多个项目可以分别设置，值越小优先级越高（不缩小） */
  150.         /* .rongqi .xiangmu:first-of-type{
  151.             flex-shrink:0;
  152.         } */
  153.         /* 定义项目在分配多余空间之前，项目占据的主轴空间 */
  154.         /* .rongqi .xiangmu:first-of-type{
  155.             flex-basis: 200px;
  156.         }
  157.         */
  159.         /* 语法：flex：flex-grow flex-shrink flex-basis; */
  160.         /*   .rongqi .xiangmu:nth-of-type(9){
  161.             flex:auto; 
  162.             flex:auto;
  163.         } */
  165.         /* 定义单个项目的对齐方式 align-self */
  166.         .rongqi .xiangmu:nth-of-type(9) {
  167.             align-self: flex-end;
  168.             align-self: flex-start;
  169.             align-self: center;
  170.             align-self: baseline;
  171.             align-self: stretch;
  172.         }
  175.     </style>
  176. </head>
  178. <body>
  179.     <div class="rongqi">
  180.         <div class="xiangmu">1</div>
  181.         <div class="xiangmu">2</div>
  182.         <div class="xiangmu">3</div>
  183.         <div class="xiangmu">4</div>
  184.         <div class="xiangmu">5</div>
  185.         <div class="xiangmu">6</div>
  186.         <div class="xiangmu">7</div>
  187.         <div class="xiangmu">8</div>
  188.         <div class="xiangmu">8</div>
  189.         <div class="xiangmu">7</div>
  192.     </div>
  193. </body>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：flex已经应用了十几年了,已成为标准,不需要再加浏览器前缀了,除非用户使用了非常古老的浏览器
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