• HTML+CSS之弹性布局

    本文主要介绍网页布局中弹性布局的使用。使用该布局，核心在于把握其中各个属性的含义及用法。各属性如下所示：

    1.flex-direction

    flex-direction设置主轴的方向，默认为x轴方向

    2.flex-wrap

    flex-wrap设置元素排列是否换行：

    设置为nowrap时，元素不换行，通过justify-content排列主轴的元素，通过align-items排列次轴的元素。（默认值）

    设置为wrap时，元素换行，通过justify-content排列主轴的元素，通过align-content排列次轴的元素。若未设置align-content的值，则可以使用align-items排列次轴的元素。注意：利用align-items排列元素时，后续可使用align-left单独定义某个元素的排列方式。

    3.justify-content

    属性取值如下：

    center:居中对齐

    flex-start:取决于主轴方向的设置，起始位置对齐

    flex-end:取决于主轴方向的设置，结束位置对齐

    space-between:元素左右贴边，距离相等

    space-around:左右元素距左右侧的距离为x,中间元素相距2x，总体距离和为空白区域

    space-evenly:元素距左右侧及元素之间的距离均分空白区域

    4.align-content

    同justify-content的属性类似，无space-evenly的取值。另外，属性可取值为stretch，为默认值。元素会由上或左进行排列（取决于主轴方向），填充整个区域

    5.align-items

    同justify-content的属性类似,无space系列属性。另外，属性可取值为stretch，还可取值为baseline:

    代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>align-content属性</title>
    9.     <style>
    10.         #main {
    11.             width: 500px;
    12.             height: 500px;
    13.             border: 1px solid #c3c3c3;
    14.             display: flex;
    15.             flex-wrap: wrap;
    16.             justify-content: space-around;
    17.             align-content: space-around;
    18.         }
    19.         
    20.         #main div {
    21.             width: 150px;
    22.             height: 150px;
    23.             line-height: 150px;
    24.             font-size: 70px;
    25.             text-align: center;
    26.             color: #ffffff;
    27.         }
    28.     </style>
    29. </head>
    30.  
    31. <body>
    32.     <div id="main">
    33.         <div style="background-color:coral;">1</div>
    34.         <div style="background-color:lightblue;">2</div>
    35.         <div style="background-color:pink;">3</div>
    36.         <div style="background-color:#c8e42b;">4</div>
    37.         <div style="background-color:#2abccf;">5</div>
    38.         <div style="background-color:#3e2ecf;">6</div>
    39.         <div style="background-color:#e93ee0;">7</div>
    40.         <div style="background-color:#e96b17;">8</div>
    41.         <div style="background-color:#ee2445;">9</div>
    42.     </div>
    43.     <div style="font-size: 35px;"> flex-direction属性设置主轴方向。<br><br>flex-wrap:<br><br>若为wrap，justify-content排主轴，align-content排次轴。<br><br> 若为nowrap,justify-content排主轴，align-items排次轴</div>
    44.     </span>
    45.  
    46.  
    47.     ​
    48. </body>
    49.  
    50. </html>

    下面介绍一个案例，利用弹性布局实现下图的效果。

    代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         .f {
    11.             width: 500px;
    12.             height: 500px;
    13.             background-color: skyblue;
    14.             display: flex;
    15.             justify-content: space-between;
    16.         }
    17.         
    18.         .f div {
    19.             height: 50px;
    20.             width: 50px;
    21.             border-radius: 50%;
    22.             background-color: orange;
    23.         }
    24.         
    25.         .f div:nth-child(2) {
    26.             /* align-self设置元素单独的对齐方式 */
    27.             align-self: flex-end;
    28.         }
    29.     </style>
    30. </head>
    31.  
    32. <body>
    33.     <div class="f">
    34.         <div></div>
    35.         <div></div>
    36.     </div>
    37. </body>
    38.  
    39. </html>

  • 相关阅读:
    Debian 11 AMD Install driver(wifi...)
    Python数据攻略-递归方式实现json多层级数据展平
    react_13
    我的第一个项目(十一) :飞机大战分包完成(简单阐述分包思路以及过程)
    调试日记 | main got an exception: Expecting value: line 35 column 13
    已解决：一个表中可以有多个自增列吗
    redis问题：三种集群——主从、哨兵、cluster集群；16384槽等
    Kettle【实践 06】使用 HTTP client 获取 GPC 全球商品分类代码 JSON 数据处理入库全流程（云资源分享:ktr+数据.sql）
    如何识别假爬虫？
    vue+python把woff字体文件中的字体全部读取出来
  • 原文地址：https://blog.csdn.net/weixin_44827643/article/details/125622034