Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex的属性描述
Blogger Information
Blog 33
fans 1
comment 0
visits 21829
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
611 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.      justify-content: flex-end;
    23.  }
    24.   .main{
    25.      width:60rem;
    26.      height:30rem;
    27.      background-color:green;
    28.      justify-content: flex-end;
    29.  }
    30.   .footer{
    31.      width:60rem;
    32.      height:30rem;
    33.      background-color: pink;
    34.  }
    35. </style>
    36. </head>
    37. <body>
    38. <div class="container">
    39.   <div class="header">1</div>
    40.   <div class="main">2</div>
    41.   <div class="footer">3</div>
    42.   </div>
    43. </body>
    44. </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>

    效果图



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