search

博客列表 >flex的属性描述

flex的属性描述

冰雪琉璃
冰雪琉璃原创
2021年03月30日 11:35:29932浏览

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>





上一条：flex的属性描述下一条：移动商城首页的页眉和页脚的布局和flex项目三个属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多