弹性布局的用法

柚子会一直发光的

已于 2022-07-21 20:32:40 修改

阅读量728

点赞数

文章标签： javascript 前端 html

于 2022-07-21 20:32:05 首次发布

本文链接：https://blog.csdn.net/m0_72699629/article/details/125919917

版权

弹性布局1

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

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

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

代码如下：

2. flex-direction:设置弹性布局中项目的排列方向。

值：

row：默认值，项目从左到右主轴排列，起点在左端。

row-reverse：项目从右到左主轴排列，起点在右端。

column：项目从上到下交叉排列，起点在顶端。

column-reverse：项目从下往上交叉轴排列，起点在下端。

代码如下：

运行结果：

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

值：

dai'daima flex-start：所有项目在起始线对齐。

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

flex-scenter：所有项目在中间线对齐：居中。

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

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

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

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

代码如下：运行结果：

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

值：

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

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

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

代码如下：

运行结果：

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

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

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

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

flex布局的属性：容器属性和项目属性。

容器默认存在两根轴线：水平方向的主轴和垂直方向的交叉轴。

6.完整代码如下：

<!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>弹性布局</title>
    <style>
        section{
            border: solid 1px red;
            height: 100px;
            display: flex;
            flex-direction: row-reverse;
            justify-content:space-around;
            align-items:  flex-start;
        }
        .box{
            border: solid 1px rgb(0, 255, 21);
            height: 50px;
            width: 100px;
    
        }
    </style>
</head>
<body>
     <section>

        <div class="box">第一块</div>
        <div class="box">第二块</div>
        <div class="box">第三块</div>
        <div class="box">第四块</div>
     </section>
</body>
</html>

弹性布局2

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

值：

nowrap:默认值，不换行。

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

warp-reverse；换行显示，第一行在下方。

代码如下：

运行结果：

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

值：

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

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

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

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

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

space-evenly:轴线俩端的间距与轴线之间的间距相等。

代码如下：

运行结果：

3.完整代码如下：

<!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>弹性布局2</title>
    <style>
        body{
            margin: 0;
        }
         section{
            height: 500px;
            border: 5px solid red;
            box-sizing: border-box;
            display: flex;
            flex-wrap:  wrap;
            align-content:  space-around;
         }
         div{
            width: 33.33%;
            height: 100px;
            background-color: blue;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
         }

         div:nth-child(2n){
            background-color: bisque;
         }
    </style>
</head>
<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>
</html>

PS：9个子元素，一行从左到右排列3个志愿书，3个占满一行。 flex布局默认不换行