PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > flex的属性描述

flex的属性描述

冰雪琉璃
冰雪琉璃 原创
2021年03月26日 18:31:34 583浏览

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;
    25. }
    26. </style>
    27. </head>
    28. <body>
    29. <div class="container">
    30. <div class="item">1</div>
    31. <div class="item">2</div>
    32. <div class="item">3</div>
    33. <div class="item">4</div>
    34. </div>
    35. </body>
    36. </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;
    25. }
    26. </style>
    27. </head>
    28. <body>
    29. <div class="container">
    30. <div class="item">1</div>
    31. <div class="item">2</div>
    32. <div class="item">3</div>
    33. <div class="item">4</div>
    34. </div>
    35. </body>
    36. </html>

    效果图



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议