CSS3---flex弹性布局

最新推荐文章于 2024-06-07 17:39:43 发布

maidu_xbd

最新推荐文章于 2024-06-07 17:39:43 发布

阅读量136

点赞数

分类专栏： CSS 文章标签： flex

本文链接：https://blog.csdn.net/maidu_xbd/article/details/97130859

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

flex---弹性布局（伸缩布局）

（1）flex布局

flex布局	说明
display: inline-flex;	将对象作为弹性伸缩盒展示，用于行内元素
display: flex;	将对象作为弹性伸缩盒展示，用于块级元素

（2）flex布局常用属性

常用属性

属性值

flex-direction

主轴的方向

row|row-reverse|column|column-reverse

row：默认值，水平方向从左到右排列，此时水平方向轴线为主轴

row-reverse：与row相反

column：垂直方向从上到下排列，此时垂直方向轴线为主轴

column-reverse：与column相反

justify-content

主轴上子项对齐方式

flex-start | flex-end | center | space-between | space-around

flex-start：默认值，与主轴开始位置对齐

flex-end：与主轴结束位置对齐

center：与主轴中间对齐

space-between：主轴方向两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start

space-around：主轴方向两端对齐，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center

align-items

侧轴上子项对齐方式

stretch | flex-start | flex-end | center | baseline

stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度

flex-start：与侧轴开始位置对齐

flex-end：与侧轴的结束位置对齐

center：与侧轴中间对齐

baseline：基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start

flex-wrap

指定主轴上的子项是否换行

nowrap | wrap | wrap-reverse

nowrap：默认值，表示不换行，Flex子项可能会溢出

wrap：表示换行，溢出的Flex子项会被放到下一行

wrap-reverse：表示反方向换行

align-content

只作用于多行的情况下，用于多行的对齐方式（侧轴）

align-self

单独指定某Flex子项的对齐方式（侧轴）

示例1

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

<head>
    <meta charset="UTF-8">
    <title>flex布局1</title>
    <style>
    #box1 {
        width: 500px;
        height: 500px;
        background-color: #ccc;

        /*伸缩布局*/
        display: flex;

        /*主轴的方向*/
        flex-direction: row;

        /*主轴方向两端对齐，中间间距相等*/
        justify-content: space-between;

        /*用于指定Flex子项是否换行*/
        flex-wrap: wrap;
        /*flex-wrap: wrap-reverse;*/


        /*侧轴两端对齐，中间间距相等*/
        align-content: space-between;
    }

    .item {
        background-color: gold;
        margin: 5px;
    }
    </style>
</head>

<body>
    <div id="box1">
        <div class="item" style="height: 60px; width: 100px">item1</div>
        <div class="item" style="height: 70px;  width: 250px">item2</div>
        <div class="item" style="height: 30px;  width: 80px">item3</div>
        <div class="item" style="height: 70px;  width: 250px">item4</div>
        <div class="item" style="height: 80px;  width: 80px">item5</div>
        <div class="item" style="height: 60px; width: 220px">item6</div>
        <div class="item" style="height: 70px;  width: 50px">item7</div>
        <div class="item" style="height: 50px;  width: 70px">item8</div>
        <div class="item" style="height: 70px;  width: 250px">item9</div>
        <div class="item" style="height: 80px;  width: 80px">item10</div>
    </div>
</body>

</html>

示例2

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

<head>
    <meta charset="UTF-8">
    <title>flex布局2</title>
    <style>
    #box1 {
        width: 400px;
        height: 400px;
        background-color: #ccc;

        /*伸缩布局*/
        display: flex;
        /*主轴的方向：行*/
        flex-direction: row;
        /*主轴上子项对齐方式:居中*/
        justify-content: center;
        /*侧轴上子项对齐方式：居中*/
        align-items: center;

    }

    .item {
        background-color: skyblue;
        margin: 5px;
    }

    .item1 {
        /*单独指定某Flex子项的对齐方式（侧轴）:与侧轴开始位置对齐*/
        align-self: flex-start;
    }

    .item4 {
        /*单独指定某Flex子项的对齐方式（侧轴）:与侧轴的结束位置对齐*/
        align-self: flex-end;
    }
    </style>
</head>

<body>
    <div id="box1">
        <div class="item item1" style="height: 60px; width: 100px">item1</div>
        <div class="item" style="height: 70px;  width: 50px">item2</div>
        <div class="item" style="height: 80px;  width: 80px">item3</div>
        <div class="item item4" style="height: 70px;  width: 100px">item4</div>
    </div>
</body>

</html>

maidu_xbd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3---flex弹性布局

flex---弹性布局（伸缩布局）（1）flex布局 flex布局说明 display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素 display: flex; 将对象作为弹性伸缩盒展示，用于块级元素（2）flex布局常用属性常...
复制链接

扫一扫

专栏目录