简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >什么是flex布局，它的常用属性有哪些

什么是flex布局，它的常用属性有哪些

刚哥哥
刚哥哥原创
2020年12月24日 16:37:003145浏览

什么是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>
上一条：1223 京东app首页下一条：使用position、flex弹性盒子仿写京东移动端
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议