HTML+CSS之弹性布局

cloudOnSkyline

已于 2022-07-21 11:39:39 修改

阅读量1k

点赞数

分类专栏： HTML和CSS 文章标签： html css

于 2022-07-05 18:57:51 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125622034

版权

HTML和CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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-self单独定义某个元素的排列方式。

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:

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content属性</title>
    <style>
        #main {
            width: 500px;
            height: 500px;
            border: 1px solid #c3c3c3;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }
        
        #main div {
            width: 150px;
            height: 150px;
            line-height: 150px;
            font-size: 70px;
            text-align: center;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div id="main">
        <div style="background-color:coral;">1</div>
        <div style="background-color:lightblue;">2</div>
        <div style="background-color:pink;">3</div>
        <div style="background-color:#c8e42b;">4</div>
        <div style="background-color:#2abccf;">5</div>
        <div style="background-color:#3e2ecf;">6</div>
        <div style="background-color:#e93ee0;">7</div>
        <div style="background-color:#e96b17;">8</div>
        <div style="background-color:#ee2445;">9</div>
    </div>
    <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>
    </span>


    
</body>

</html>

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

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .f {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: flex;
            justify-content: space-between;
        }
        
        .f div {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            background-color: orange;
        }
        
        .f div:nth-child(2) {
            /* align-self设置元素单独的对齐方式 */
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div class="f">
        <div></div>
        <div></div>
    </div>
</body>

</html>

cloudOnSkyline

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS之弹性布局

本文主要介绍网页布局中弹性布局的使用。使用该布局，核心在于把握其中各个属性的含义及用法。各属性如下所示：flex-direction设置主轴的方向，默认为x轴方向flex-wrap设置元素排列是否换行：设置为nowrap时，元素不换行，通过justify-content排列主轴的元素，通过align-items排列次轴的元素。设置为wrap时，元素换行，通过justify-content排列主轴的元素，通过align-content排列次轴的元素。属性取值如下：center:居中对齐flex-start:取
复制链接

扫一扫

专栏目录