弹性布局的多种布局应用

最新推荐文章于 2023-04-27 18:15:08 发布

id2359955624

最新推荐文章于 2023-04-27 18:15:08 发布

阅读量609

点赞数 1

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/id2359955624/article/details/125914541

版权

1.flex弹性布局

弹性布局，又称为flex布局布局，是css3.0新增的布局方式。

弹性布局，用来给盒模型提供最大的灵活性。

任何一个容器，都可以被设置弹性布局。

采用弹性布局的标签，父元素被称为flex容器，简称为“容器”；它的所有子元素自动成为容器成员，子元素称为flex项目，简称为“项目”；

flex布局的属性：

容器属性和项目属性.。

容器默认存在两根轴线：

. 水平方向的主轴和垂直方向的交叉轴.

<style>
        section{
            border: solid 1px red;
            height: 100px;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: flex-end;
        }
        .box{
            border: solid 1px blue;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <section>
        <div class="box">第1块</div>
        <div class="box">第2块</div>
        <div class="box">第3块</div>
        <div class="box">第4块</div>
    </section>
</body>
</html>

section{

display: flex; 显示布局

flex-direction: row; 设置弹性布局中项目的排列方向

justify-content: space-evenly; 项目在主轴的对齐方向

align-items: flex-end; 定义当行项目在交叉轴如何对齐

}

1 display: flex; 定义弹性布局

flex布局，会影响子元素的布局方式。

flex布局中的元素，子元素不在参与原有的流式布局，而是参与弹性布局。

flex中，无论是行元素还是块元素，都会按照flex的方向进行排列。

2.flex-direction: 项目在主轴的对齐方向。

注意：项目从左往右排列的时候，起始线在左端，反之则在右端。

值：

flex-start：所有的项目在起始线对齐；

flex-end：所有的项目在终止线对齐；

center：所有项目在中间线对齐；居中；

space-around：项目两端间距相等，项目之间的间距相等，是项目到两端的2倍。

space-between：项目两端对齐，项目之间的间距相等。

space-evenly：项目之间的间距与项目到两端的间距相等。

3.justify-content: 项目在主轴的对齐方向。

注意：项目从左往右排列的时候，起始线在左端，反之则在右端。

值：

flex-start：所有的项目在起始线对齐；

flex-end：所有的项目在终止线对齐；

center：所有项目在中间线对齐；居中；

space-around：项目两端间距相等，项目之间的间距相等，是项目到两端的2倍。

space-between：项目两端对齐，项目之间的间距相等。

space-evenly：项目之间的间距与项目到两端的间距相等。

4.align-items: 定义当行项目在交叉轴如何对齐。

值：

center：项目在交叉轴中点对齐。

flex-start：项目在交叉轴的起点对齐。

flex-end：项目在交叉轴的终点对齐。

2.弹性布局

<style>
        body{
            margin: 0;
        }
        section{
            width: 100%;
            height: 500px;
            border: 5px solid red;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-content: space-evenly;
        }
        div{
            width: 33.33%;
            height: 100px;
            background-color: cornflowerblue;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
        }
        div:nth-child(2n){
            background-color: darkcyan;
        }
    </style>
|||||||||||||||||||||||||||||||||||||||||||||||
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </section>
</body>

section{
border: 5px solid red;
box-sizing: border-box;        盒模型改为块模型
display: flex;           显示居中
flex-wrap: wrap;                       换行显示，第一行在上方。
align-content: space-evenly;    轴线两端的间距与轴线之间的间距相等。
}

1.flex-wrap: 定义项目在主轴一行排列不下时，如何换行。

值：

nowrap：默认值，不换行。

wrap：换行显示，第一行在上方。

wrap-reverse：换行显示，第一行在下方。

2.align-content: 定义多跟轴线在交叉轴如何对齐。如果项目只有一根轴线，则该属性不起作用。

值：

center：多跟轴线在交叉轴的中点对齐。

flex-start：多条轴线在交叉轴的起点对齐。

flex-end：多条轴线在交叉轴的终点对齐。

space-around：轴线两端的间距相等，轴线之间的间距相等，是轴线两端的2倍。

space-between：多条轴线两端对齐，轴线之间间距相等。

space-evenly：轴线两端的间距与轴线之间的间距相等。

3弹性布局——项目属性

    <style>
        body{
            margin: 0;
        }
        section{
            width: 100%;
            height: 500px;
            background-color: rgba(255, 140, 0, 0.466);
            display: flex;
            align-items: center;
        }
        div{
            height: 100px;
            background-color: #ccdf;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
        }
        /* 3 1 4 2 */
        div:nth-child(1){
            order: 2;
            background-color: #ccf;
        }
        div:nth-child(2){
            order: 4;
            background-color: #ccf;
        }
        div:nth-child(3){
            order: 1;
        }
        div:nth-child(4){
            order: 3;
        }
    </style>
</head>
<body>
    <section>
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
    </section>
</body>
</html>

order：定义项目的排列顺序。

值：

number，默认为0，值越小越靠前。

flex-grow: 定义项目的放大比例。

值：

number，默认值为0，存在剩余空间，也不放大。

放大空间为主轴的剩余空间。

flex-basis: 定义项目占据的主轴空间。

flex-basis: 20%; flex-basis: 定义项目占据的主轴空间。

align-self: end; align-self: 允许当个项目有与其他的项目在交叉轴有不同的对齐方式。

4.弹性布局——缩小比例

 <style>
        *{
            margin: 0;
        }
        div{
            width: 100%;
            height: 500px;
            border: 5px solid red;
            box-sizing: border-box;
            display: flex;
        }
        p{
            width: 200px;
            height: 500px;
            font-size: 40px;
            text-align: center;
            line-height: 500px;
            background-color: darkseagreen;
        }
        p:nth-child(2n){
            background-color: #fcf;
        }
        p:nth-child(2){

            flex-shrink: 3;     ！！！！！！！！
        }
    </style>
</head>
<body>
    <div>
        <p>01</p>
        <p>02</p>
        <p>03</p>
        <p>04</p>
    </div>
</body>
</html>