Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex的属性描述
Blogger Information
Blog 33
fans 1
comment 0
visits 21833
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
920 people have browsed it

flex的概念

  • flex是表示一个弹性盒子，是css的布局方式
  • 成为弹性盒子时有主轴和交叉轴之分，也就是x轴和y轴。

    flex的作用

  • 当一个盒子的display属性设置为flex的时候，盒子会成为一个弹性盒子。成为行内块元素

    flex主要的属性

  1. 主轴方向：flex-direction
  • flex-direction:row 水平向右（默认）
  • flex-direction:row-reverse 水平向左
  • flex-direction:column 垂直向下
  • flex-direction:column-reverse 垂直向上

    案例演示

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>flex相关属性</title>
    6.   <style type="text/css">
    7.   html{
    8.       font-size:10px;
    9.   }
    10.    .container{
    11.        display: flex;
    12.        /*把项目当成一个整体，水平向右显示它是默认行为*/
    13.      flex-direction:row;
    14.      /*flex-direction:row-reverse;*/
    15.      /*flex-direction:column;*/
    16.      /*flex-direction: column-reverse;*/
    17. }
    18. .header{
    19.      width:60rem;
    20.      height:30rem;
    21.      background-color:red;
    22.  }
    23.   .main{
    24.      width:60rem;
    25.      height:30rem;
    26.      background-color:green;
    27.  }
    28.   .footer{
    29.      width:60rem;
    30.      height:30rem;
    31.      background-color: pink;
    32.  }
    33. </style>
    34. </head>
    35. <body>
    36. <div class="container">
    37.   <div class="header">1</div>
    38.   <div class="main">2</div>
    39.   <div class="footer">3</div>
    40.   </div>
    41. </body>
    42. </html>

    效果图依次为




    主轴对齐方式

  • 属性为：justify-content
  • 取值有五种分别是：
  1. justify-content:center;(居中对齐)
  2. justify-content:flex-start：(向主轴的开始位置对齐)
  3. justify-content:flex-start：(向主轴的结束位置对齐)
  4. justify-content:space-around(让空白环绕盒子显示)
  5. justify-content:space-between(让空白只在盒子之间显示)

    案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>flex父元素相关属性</title>
    6.  <style type="text/css">
    7.  html{
    8.      font-size:10px;
    9.  }
    10.   .container{
    11.       display: flex;
    12.       justify-content: space-between;
    13.       justify-content: space-around;
    14.       justify-content: center;
    15.       justify-content: flex-start;
    16.       justify-content: flex-end;
    17.       border:1px solid #000
    18.  }
    19. .header{
    20.     width:20rem;
    21.     height:30rem;
    22.     background-color:pink;
    23.     text-align: center;
    24.     font-size:3rem;
    25.  border:1px solid red;
    26. }
    27.  .main{
    28.     width:20rem;
    29.     height:30rem;
    30.     background-color:pink;
    31.     text-align: center;
    32.     font-size:3rem;
    33.  border:1px solid red;
    34. }
    35.  .footer{
    36.     width:20rem;
    37.     height:30rem;
    38.     background-color: pink;
    39.     text-align:center;
    40.     font-size:3rem;
    41.  border:1px solid red;
    42. }
    43. </style>
    44. </head>
    45. <body>
    46. <div class="container">
    47.  <div class="header">1</div>
    48.  <div class="main">2</div>
    49.  <div class="footer">3</div>
    50.  </div>
    51. </body>
    52. </html>

    效果图





    单行侧轴对齐方式

  • 俗称的y轴

    属性为

  • align-items

    属性值：

  1. align-items：flex-start：向侧轴的开始位置对齐
  2. align-items：flex-end：向侧轴的结束位置对齐
  3. align-items：center：居中对齐

  4. align-items：stretch：让子盒子的高度拉伸显示（默认值）

    注意：当给盒子内的子元素设置 align-items：stretch属性的时候不能给它盒子内部的子元素设置高度

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>flex容器父元素相关属性</title>
    6.  <style type="text/css">
    7.  html{
    8.      font-size: 10px;
    9.  }
    10.  .container{
    11.       /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
    12.      display: flex;
    13.      height: 20rem;
    14.      border: 1px solid #000;
    15.      align-items: stretch;
    16.   /*   align-items: flex-end;
    17.      align-items: flex-start;*/
    18.      /*align-items: center;*/
    19.  }
    20.   .container>.item{
    21.      width:20rem;
    22.      /*height: 10rem;*/
    23.      background-color: red;
    24.      border:1px solid white;
    26.  }
    27.  </style>
    28. </head>
    29. <body>
    30. <div class="container">
    31. <div class="item">1</div>
    32. <div class="item">2</div>
    33. <div class="item">3</div>
    34. <div class="item">4</div>
    35. </div>
    36. </body>
    37. </html>

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>flex容器父元素相关属性</title>
    6.  <style type="text/css">
    7.  html{
    8.      font-size: 10px;
    9.  }
    10.  .container{
    11.       /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
    12.      display: flex;
    13.      height: 20rem;
    14.      border: 1px solid #000;
    15.      /*align-items: stretch;*/
    16.     /*align-items: flex-end;*/
    17.      align-items: flex-start;
    18.      /*align-items: center;*/
    19.  }
    20.   .container>.item{
    21.      width:20rem;
    22.      height: 10rem;
    23.      background-color:red;
    24.      border:1px solid white;
    26.  }
    27.  </style>
    28. </head>
    29. <body>
    30. <div class="container">
    31. <div class="item">1</div>
    32. <div class="item">2</div>
    33. <div class="item">3</div>
    34. <div class="item">4</div>
    35. </div>
    36. </body>
    37. </html>

    效果图



    属性为align-content

    描述：

  • 如果需要设置多行元素的侧轴对齐方式，此时需要使用 align-content 才行

属性值有

  1. align-content:center(子元素在侧轴上居中显示)
  2. align-content:flex-end(子元素在侧轴的尾部开始排列)
  3. align-content:flex-start(子元素在侧轴的头部开始排列 （默认值）)
  4. align-content:stretch(设置子元素高度，平分父元素高度)
  5. align-content:space-around(子元素在侧轴上平分剩余空间)
  6. align-content:space-between(子元素线贴着侧轴的两边，再平分剩余空间)

    代码和显示效果依次为：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.          div{
    8.              display: flex;    
    9.              width: 800px;
    10.              height: 400px;
    11.              background-color: orange;
    12.              flex-wrap: wrap;    /* 有了换行,故侧轴上的排列方式用align-content */
    13.              align-content: flex-start;
    14.          }
    15.          div span{
    16.              width: 150px;
    17.              height: 100px;
    18.              background: skyblue;
    19.              margin: 10px;
    20.          }
    21.      </style>
    22. </head>
    23. <body>
    24. <div>
    25.  <span>1</span>
    26.  <span>2</span>
    27.  <span>3</span>
    28.  <span>4</span>
    29.  <span>5</span>
    30.  <span>6</span>
    31. </div>
    32. </body>
    33. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.          div{
    8.              display: flex;    
    9.              width: 800px;
    10.              height: 400px;
    11.              background-color: orange;
    12.              flex-wrap: wrap;    /* 有了换行,故侧轴上的排列方式用align-content */
    13.              align-content: flex-end;
    14.          }
    15.          div span{
    16.              width: 150px;
    17.              height: 100px;
    18.              background: skyblue;
    19.              margin: 10px;
    20.          }
    21.      </style>
    22. </head>
    23. <body>
    24. <div>
    25.  <span>1</span>
    26.  <span>2</span>
    27.  <span>3</span>
    28.  <span>4</span>
    29.  <span>5</span>
    30.  <span>6</span>
    31. </div>
    32. </body>
    33. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.          div{
    8.              display: flex;    
    9.              width: 800px;
    10.              height: 400px;
    11.              background-color: orange;
    12.              flex-wrap: wrap;    /* 有了换行,故侧轴上的排列方式用align-content */
    13.              align-content:center;
    14.          }
    15.          div span{
    16.              width: 150px;
    17.              height: 100px;
    18.              background: skyblue;
    19.              margin: 10px;
    20.          }
    21.      </style>
    22. </head>
    23. <body>
    24. <div>
    25.  <span>1</span>
    26.  <span>2</span>
    27.  <span>3</span>
    28.  <span>4</span>
    29.  <span>5</span>
    30.  <span>6</span>
    31. </div>
    32. </body>
    33. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.          div{
    8.              display: flex;    
    9.              width: 800px;
    10.              height: 400px;
    11.              background-color: orange;
    12.              flex-wrap: wrap;    /* 有了换行,故侧轴上的排列方式用align-content */
    13.              align-content: space-around;
    14.          }
    15.          div span{
    16.              width: 150px;
    17.              height: 100px;
    18.              background: skyblue;
    19.              margin: 10px;
    20.          }
    21.      </style>
    22. </head>
    23. <body>
    24. <div>
    25.  <span>1</span>
    26.  <span>2</span>
    27.  <span>3</span>
    28.  <span>4</span>
    29.  <span>5</span>
    30.  <span>6</span>
    31. </div>
    32. </body>
    33. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.          div{
    8.              display: flex;    
    9.              width: 800px;
    10.              height: 400px;
    11.              background-color: orange;
    12.              flex-wrap: wrap;    /* 有了换行,故侧轴上的排列方式用align-content */
    13.              align-content: space-between;
    14.          }
    15.          div span{
    16.              width: 150px;
    17.              height: 100px;
    18.              background: skyblue;
    19.              margin: 10px;
    20.          }
    21.      </style>
    22. </head>
    23. <body>
    24. <div>
    25.  <span>1</span>
    26.  <span>2</span>
    27.  <span>3</span>
    28.  <span>4</span>
    29.  <span>5</span>
    30.  <span>6</span>
    31. </div>
    32. </body>
    33. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.          div{
    8.              display: flex;    
    9.              width: 800px;
    10.              height: 400px;
    11.              background-color: orange;
    12.              flex-wrap: wrap;    /* 有了换行,故侧轴上的排列方式用align-content */
    13.              align-content:stretch;
    14.          }
    15.          div span{
    16.              width: 150px;
    17.              height: 100px;
    18.              background: skyblue;
    19.              margin: 10px;
    20.          }
    21.      </style>
    22. </head>
    23. <body>
    24. <div>
    25.  <span>1</span>
    26.  <span>2</span>
    27.  <span>3</span>
    28.  <span>4</span>
    29.  <span>5</span>
    30.  <span>6</span>
    31. </div>
    32. </body>
    33. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.          div{
    8.              display: flex;    
    9.              width: 800px;
    10.              height: 400px;
    11.              background-color: orange;
    12.              flex-wrap: wrap;    /* 有了换行,故侧轴上的排列方式用align-content */
    13.              align-content: space-between;
    14.          }
    15.          div span{
    16.              width: 150px;
    17.              background: skyblue;
    18.              margin: 10px;
    19.          }
    20.      </style>
    21. </head>
    22. <body>
    23. <div>
    24.  <span>1</span>
    25.  <span>2</span>
    26.  <span>3</span>
    27.  <span>4</span>
    28.  <span>5</span>
    29.  <span>6</span>
    30. </div>
    31. </body>
    32. </html>
  • 注意：上述如果没有给子元素设置高度，运行结果为：（没有给子元素设置高度，这两行子元素平分父元素高度）

    项目属性3个

    1.align-self
    2.order
  1. flex

    用途：

  • flex：设置基本项目的伸缩与宽度
  • aling-self:某个项目得对齐方式
  • order:设置某个项目在主轴上的排列顺序

    属性值分别是：

  1. align-self:
  • align-self:center(居中对齐)
  • align-self:flex-end(底部对齐)
  • align-self:flex-start(头部对齐)
  • align-self：stretch(默认拉伸)
  1. flex:
  • flex通常不会用来设置整一个项目得默认选项，而是用来设置某一个项目得特征
  • flex得全写是：flex：flex-grow flex-shrink flex-basis
  • flex-grow表示放大因子
  • flex-shrink表示收缩因子
  • flex-basis:表示项目占据得主轴宽度，优先级大于width，小于min-width
  • flex：0 1 auto(默认行为)
  • 表示禁止放大，但是允许收缩，项目在主轴上的宽度自动计算
  1. order:
  • 设置项目在主轴上的显示顺序
  • 数值越大越靠后面显示，数值越小越靠前显示。

  • 可以为负值

    案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <title>order属性案例的描述</title>
    6.    <style type="text/css">
    7.    html{
    8.        font-size: 10px;
    9.    }
    10.    .container{
    11.        border:1px solid #000;
    12.        min-height:30rem;
    13.        display: flex;
    14.    }
    15.    .container .item{
    16.        border: 1px solid white;
    17.        background-color: red;
    18.        height: 10rem;
    19.        width:10rem;
    20.        font-size: 3rem;
    21.    }
    22.    .container > .item:nth-of-type(2){
    23.        order:20;
    24.    }
    25. /*     .item.last{
    26.        order:-1;
    27.    }*/
    28.    .container>.item:last-of-type{
    29.        order:100;
    30.        background-color: yellow;
    31.    }
    32.    .container> .item:first-of-type{
    33.        background-color: skyblue;
    34.    }
    36.    </style>
    37. </head>
    38. <body>
    39. <div class="container">
    40. <div class="item">itme1</div>
    41. <div class="item">itme2</div>
    42. <div class="item">itme3</div>
    43. <div class="item last">itme4</div>
    44. </div>
    45. </body>
    46. </html>

    效果图：


    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <title>flex</title>
    6.    <style type="text/css">
    7.      html{
    8.       font-size: 10px;
    9.     }
    11.     .container {
    12.       /* 转为flex弹性布局元素 */
    13.       display: flex;
    14.       height: 20rem;
    15.       border: 1px solid #000;
    16.     }
    18.     .container > .item {
    19.       background-color: lightcyan;
    20.       border: 1px solid #000;
    21.       font-size: 3rem;
    22.     }
    24.     /* 选择第一个和第四个项目 */
    25.     .container > .item:first-of-type,
    26.     .container > .item:last-of-type {
    27.       flex:1;
    28.     }
    30.     /* 选择第二个和第三个项目 */
    31.     .container > .item:nth-of-type(2),
    32.     .container > .item:nth-of-type(2) + * {
    33.       flex: 3;
    34.     }
    35.    </style>
    36. </head>
    37. <body>
    38. <div class="container">
    39.     <div class="item">item1</div>
    40.     <div class="item">item2</div>
    41.     <div class="item">item3</div>
    42.     <div class="item">item4</div>
    43.   </div>
    44.   </body>
    45. </html>





Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

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