作为一个前端居然不会用 flex 布局

最新推荐文章于 2024-07-09 23:44:56 发布

瑶琴AI前端

最新推荐文章于 2024-07-09 23:44:56 发布

阅读量976

点赞数 11

分类专栏： CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_40348267/article/details/139948762

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、flex弹性布局

1.什么是flex布局？

flex（flex Box）弹性布局

2.什么是flex容器（flex container）

采用flex布局的元素，成为flex容器

3.什么是flex项目（flex item）

flex容器的所有子元素自动成为容器成员，成为flex项目，孙子元素不会成为容器成员

二、flex容器的属性

1.display属性：flex和inline-flex

flex:将对象作为弹性伸缩盒显示

inline-flex：将对象作为内联块级弹性伸缩盒来显示

<style type="text/css">
    *{
        margin: 0;padding: 0;
    }
    p{
        height: 40px;line-height: 40px;background-color: #989899;
    }
    /*1.display:flex属性*/
    .box-1{
        display: flex; /*默认的沿主轴方向上来排列了，如没有这个属性，会以块级元素向下排列*/
        /*由父元素撑开，具有block属性，也有flex属性*/
        background-color: #888908;
        /*width: 100%;*/
    }
    /*2.display:inline-flex属性*/
    /*由里面的内容撑开，具有inline-block属性，也有flex属性*/
    .box-2{
        display: inline-flex;
        background-color: #888908;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
        border:1px solid white;
        text-align: center;
    }
</style>
<body>
    <p>display: flex;的使用</p>
    <div class="box-1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <p>display: inline-flex;的使用</p>
    <div class="box-2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</body>

2.flex-direction属性：决定主轴的方向（即项目的排列方向）

row(默认值):主轴为水平方向，起点在左端

row-reverse:主轴为水平方向，起点在右端

column:主轴为垂直方向，起点在上沿

column-reverse:主轴为垂直方向，起点在下沿

.box-1{
    display: flex;
    background-color: #888908;
    /*width: 100%;*/
    flex-direction: column-reverse;
}

3.flex-wrap属性：如果一条轴线排不下，如何换行

默认情况下，项目都排在一条线（又称轴线）上

.box{ flex-wrap: nowrap | wrap | wrap-reverse;}

nowrap :不换行

wrap :换行，第一行在上面

wrap-reverse：换行，第一行在下面

/*1.display:flex属性*/
.box-1{
    display: flex;
    background-color: #888908;
    flex-wrap: wrap;
}
/*2.display:inline-flex属性*/
.box-2{
    display: inline-flex;
    background-color: #888908;
    flex-wrap: wrap-reverse;
}

4.flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box{ flex-flow:<flex-direction> || <flex-wrap>; }

5.justify-content属性：定义了项目在主轴上的对齐方式

.box{ justify-content:flex-start | flex-end |center|space-between | space-around; }

flex-start(默认值):左对齐

flex-end：右对齐

center：居中

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

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

<style type="text/css">
    *{
        margin: 0;padding: 0;
    }
    p{
        height: 40px;line-height: 40px;background-color: #989899;
    }
    /*1.display:flex属性*/
    .box-1{
        display: flex;
        background-color: #888908;
        flex-wrap: wrap;
        justify-content: center; /*里面的内容是居中的*/
    }
    /*2.display:inline-flex属性*/
    .box-2{
        display: inline-flex;
        background-color: #888908;
        flex-wrap: wrap-reverse;
        justify-content: center; /*里面的内容是居中的*/
    }
    .box{
        width: 100px;
        height: 100px;
        background: red;
        border:1px solid white;
        text-align: center;

    }
</style>
<body>
    <p>display: flex;的使用</p>
    <div class="box-1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
    </div>
    <p>display: flex;的使用</p>
    <div class="box-2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
    </div>
</body>

6.align-items属性：定义项目在交叉轴上如何对齐

.box{ align-item : flex-start | flex-end | center | baseline | stretch }

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center:交叉轴的中线对齐

baseline ：项目的第一行文字的基线对齐

stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

/*1.display:flex属性*/
.box-1{
    display: flex;
    background-color: #888908;
    /*align-items: flex-start;*/
    align-items: flex-end;
}
/*2.display:inline-flex属性*/
.box-2{
    display: inline-flex;
    background-color: #888908;
    flex-wrap: wrap-reverse;
    align-items: center;
}
.box{
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: red;
    border:1px solid white;
    text-align: center;

}
<body>
    <p>display: flex;的使用</p>
    <div class="box-1">
        <div class="box">1</div>
        <div class="box" style="height: 200px;">2</div>
        <div class="box">3</div>
        <div class="box" style="height: 200px;">4</div>

    </div>
    <p>display: inline-flex;的使用</p>
    <div class="box-2">
        <div class="box">1</div>
        <div class="box" style="height: 200px;">2</div>
        <div class="box">3</div>
        <div class="box" style="height: 200px;">4</div>
    </div>
</body>

.box-2{
　　display: inline-flex;
　　background-color: #888908;
　　flex-wrap: wrap-reverse;
　　align-items: stretch ;
}
.box{
　　width: 100px;
　　height: auto;
　　line-height: 100px;
　　background: red;
　　border:1px solid white;
　　text-align: center;

}

7.align-content属性定义了多根轴线（多行）在交叉轴上的对齐方式

如果项目只有一根轴线（一行），该轴线不起作用

.box{ align-content : flex-start | flex-end | center |space-between | space-around | stretch;}

flex-start:交叉轴的起点对齐（整体与上端对齐）

flex-end：与交叉轴的终点对齐（整体与底端对齐）

center：与交叉轴的中点对齐（整体与中线对齐）

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等

stretch（默认值）：轴线占满整个交叉轴

.box-1{
    height: 400px;
    display: flex;
    background-color: #888908;
    /*align-items: flex-start;*/
    flex-wrap: wrap; /*先设置换行*/
    align-content: center;
    /*align-content:space-between;*/
}
/*2.display:inline-flex属性*/
.box-2{
    height: 400px;
    display: inline-flex;
    background-color: #888908;
    flex-wrap: wrap-reverse; /*反向换行*/
    align-content: flex-start;
}
.box{
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: red;
    border:1px solid white;
    text-align: center;
}
<p>display: flex;的使用</p>
<div class="box-1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>

</div>
<p>display: inline-flex;的使用</p>
<div class="box-2">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box" >4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</div>

三、flex项目的属性

1.order属性：定义项目的排列顺序；数值越小，排列越靠前，默认为0;支持负数

.item{order:<integer>;}

 <style>
          *{
              margin: 0;
              padding: 0;
          }
          .box-1{
              background-color: #989898;
              display: flex;
          }
          .box{
              box-sizing: border-box;
              width: 150px;
              height: 150px;
              background-color: yellow;
              border:5px solid orange;
              font-size: 20px;
          }
          .box5{
              order:-1;  //这样第5个就排在了前面
          }
    </style>
</head>

<body>
    <div class="box-1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box box5">5</div>
    </div>
</body>

2.flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；值不可以是百分比或其他非数字

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

如果一个项目的flex-grow为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

.item{flex-grow:<number>;/*default:0*/}
          .box-1{
              background-color: #989898;
              display: flex;
          }
          .box{
              box-sizing: border-box;
              width: 150px;
              height: 150px;
              background-color: yellow;
              border:5px solid orange;
              font-size: 20px;
              flex-grow: 1; /*即使项目的宽度不够，也会等分*/
          }
          .box5{
              order:-1;
          }
<div class="box-1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box box5">5</div>
</div>
如果有的项目有flex-grow属性，有的项目有width属性；那么有flex-grow属性的项目将等分剩余空间
          .box-1{
              background-color: #989898;
              display: flex;
          }
          .box{
              box-sizing: border-box;
              width: 150px;
              height: 150px;
              background-color: yellow;
              border:5px solid orange;
              font-size: 20px;
              flex-grow: 1; /*即使项目的宽度不够，也会等分*/
          }
          .box4{
              width: 200px;  /*这个占200，其他等分空间*/
          }
<div class="box-1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
</div>

3.flex-shrink属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小

如果一个项目的flex-shrink属性都为0，其他项目都为1，则空间不足时，前者不缩小

负值对该属性无效

.item{flex-shrink:<number>;/*default:1*/}
          .box{
              box-sizing: border-box;
              width: 150px;
              height: 150px;
              background-color: yellow;
              border:5px solid orange;
              font-size: 20px;
              flex-shrink: 1;  
          }
          .box4{
              width: 200px;  
          }
如下，空间不足了，宽度缩小时，会等比例缩小

　.box4{
　　　　width: 200px;
　　　　flex-shrink: 0; /*空间不足时，第4块也不会缩小*/
　　}

4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间

它的默认值为auto，即项目的本来大小

.item{flex-basis:<length>; | auto; /*default auto*/}
          .box-1{
              background-color: #989898;
              display: flex;
              /*flex-direction: column;*/
          }
          .box{
              box-sizing: border-box;
              width: 150px;
              height: 150px;
              background-color: yellow;
              border:5px solid orange;
              font-size: 20px;
          }
          .box4{
              width: 200px; 
              /*height: 200px; */
              flex-basis: 400px;  /*相当于width优先级比width高;跟随主轴的方向，如果主轴是交叉轴，那么它显示的就是height为400px；*/
          }

5.flex属性：是flex-grow,flex-shrink和flex-basis的简写，默认值为 0 1 auto,后两个属性可选

该属性有两个快捷键：auto（1 1 auto）和none（0 0 auto）

.item{ flex : none | [<flex-grow> <flex-shrink>|<flex-basis>]}

.box{
　　box-sizing: border-box;
　　width: 150px;
　　height: 150px;
　　background-color: yellow;
　　border:5px solid orange;
　　font-size: 20px;
　　flex: 1; /*表示flex:1 1 0%;平分剩余空间*/
}

6.align-self属性：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

（表示脱离父元素的align-items属性，项目单独设置对齐方式）

.Item{ align-self:auto | flex-start | flex-end | center | baseline | stretch}

.box-1{
              height: 300px;
              background-color: #989898;
              display: flex;
              align-items: center;  /*父元素设置垂直居中*/
          }
          .box{
              box-sizing: border-box;
              width: 150px;
              height: 150px;
              background-color: yellow;
              border:5px solid orange;
              font-size: 20px;
              flex: 1; /*表示flex:1 1 0%;平分空间*/
          }
          .box1{
              align-self: flex-end;
          }
          .box4{
              align-self: flex-start;
          }
<div class="box-1">
    <div class="box box1">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
</div>

瑶琴AI前端

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
作为一个前端居然不会用 flex 布局

如果项目只有一根轴线（一行），该轴线不起作用flex-start:交叉轴的起点对齐（整体与上端对齐）flex-end：与交叉轴的终点对齐（整体与底端对齐）center：与交叉轴的中点对齐（整体与中线对齐）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布space-around：每根轴线两侧的间隔都相等stretch（默认值）：轴线占满整个交叉轴。
复制链接

扫一扫