css进阶三（弹性盒子布局）

2024-01-15 10:53:52

文章目录

前言
一、弹性盒子的基本概念
二、弹性盒子的容器属性
三、弹性盒子的项目属性

前言

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式。它的作用有在不同方向排列元素，重新排列元素的显示顺序，更改元素的对齐方式，动态地将元素装入容器。

一、弹性盒子的基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

在 Flexbox 模型中，有三个核心概念：
– flex 项（注：也称 flex 子元素），需要布局的元素
– flex 容器，采用flex布局的块级标签(div)，其包含 flex 项
– 排列方向（direction），这决定了 flex 项的布局方向

举例如下：未加flex前，盒子a1和a2布局如下所示：

<!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>003</title>
</head> 
 <style>
.a {
    width: 400px;
    height: 200px;
}
.a1 {
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
.a2 {
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin-top: 7px;![请添加图片描述](https://www.icode9.com/i/ll/?i=1bd045f17d044540b0ab6fadf98f2871.png?,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqM5Y2B5LiA5Z2X55-z5aS0,size_11,color_FFFFFF,t_70,g_se,x_16)

    margin-left: 5px;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
    </div>
</body>
</html>

当我们给盒子a设置了flex属性后，它的变化如下：

...
.a {
    width: 400px;
    height: 200px;
    display: flex;
}
...

二、弹性盒子的容器属性

1、flex-direction：布局方向

属性值	说明
row（默认值）	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向(水平布局),起点在右端
column	主轴为垂直方向(垂直布局),起点在上沿
column-reverse	主轴为垂直方向(垂直布局),起点在下沿

我们可以看一下row-reverse的效果：

<!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>003</title>
</head> 
 <style>
.a {
    width: 400px;
    height: 200px;
    display: flex;
    flex-direction: row-reverse;
}
.a1 {
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
.a2 {
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin-top: 7px;
    margin-left: 5px;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
    </div>
</body>
</html>

此时，a1在a2的右边，证明此时布局的方向是从右边开始。

2、flex-wrap：环绕效果

属性值	说明
nowrap	默认值,表示不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

我们可以看一下wrap-reverse的效果：

<!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>003</title>
</head> 
 <style>
.a {
    display: flex;
    flex-wrap: wrap-reverse;
}
.a1,.a2,.a3,.a4,.a5 {
    width: 400px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
        <div class="a4">a4</div>
        <div class="a5">a5</div>
    </div>
</body>
</html>

可以发现，此时，当盒子变多时会自动换行，且第一行在下方。
若是我们不使用wrap-reverse的话效果就会如下图：

3、flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。基本语法如下：

flex-flow: row nowrap;

4、justify-content：对齐方式

属性值	说明
flex-start	默认值,左对齐
flex-end	右对齐
center	居中
space-between	两端对齐,项目之间的间隔相等
space-around	项目两侧的间距相同,项目间的间距比两侧的间距大一倍

首先看一下center的效果：

<!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>003</title>
</head> 
 <style>
.a {
    display: flex;
    justify-content: center;
}
.a1,.a2,.a3{
    width:200px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

此时盒子们在页面中居中布局。

然后看一下space-around的效果：

<!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>003</title>
</head> 
 <style>
.a {
    display: flex;
    justify-content:space-around;
}
.a1,.a2,.a3{
    width:200px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

此时项目两侧的间距相同,且项目间的间距比两侧的间距大一倍。

5、align-items

属性值	说明
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch（默认值	如果项目未设置高度或设为auto，将占满整个容器的高度

首先看一下center的效果：

<!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>003</title>
</head> 
 <style>
.a {
    display: flex;
    align-items: center;
}
.a1{
    width:200px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
.a2{
    width:200px;
    height:500px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
.a3{
    width:200px;
    height: 100px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

然后看一下flex-end的效果，改动代码如下：

...
.a {
    display: flex;
    align-items: flex-end;
}
...

6、 align-content

定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用。

属性值	说明
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）	轴线占满整个交叉轴

（图来源于网上，如有侵权，请联系）

三、弹性盒子的项目属性

1、order属性

项目的排列顺序,数字越小排列越靠前，默认为0，可以为负值。
示例如下：

<!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>003</title>
</head> 
 <style>
.a {
    display: flex;
}
.a1{
    width:200px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    order: -2;
}
.a2{
    width:200px;
    height:500px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    order: 7;
}
.a3{
    width:200px;
    height: 100px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    order: -9;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

此时a2的order值最大，a3最小，所以a2排列在最右边，a3排列在最左边。

2、flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
示例如下：

<!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>003</title>
</head> 
 <style>
.a {
    display: flex;
}
.a1{
    width:200px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    order: -2;
    flex-grow: 1;
}
.a2{
    width:200px;
    height:500px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    order: 7;
    flex-grow: 1;
}
.a3{
    width:200px;
    height: 100px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    order: -9;
    flex-grow: 1;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

当三个盒子的flex-grow值都为1时，就算给他们设定了宽度，他们也依旧平分了所有空间。
改动代码如下：

.a1{
    width:200px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    order: -2;
    flex-grow:2;
}

可以明显看出，当a1的flex-grow值为2，其余盒子值为1时，a1占据的剩余空间是a2和a3的两倍。

3、flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
示例如下：

<!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>003</title>
</head> 
 <style>
.a {
    display: flex;
}
.a1{
    width:600px;
    height: 200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    flex-shrink: 0;
}
.a2{
    width:600px;
    height:200px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    flex-shrink: 1;
}
.a3{
    width:600px;
    height: 100px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    flex-shrink: 1;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

此时a1的flex-shrink的值为0，其余为1，所以当空间不足时，a1不缩小，a2和a3缩小。

4、align-self属性

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

align-self: auto | flex-start | flex-end | center | baseline | stretch;

示例如下：

<!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>003</title>
</head> 
 <style>
.a {
    display: flex;
}
.a1{
    width:300px;
    height: 500px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
.a2{
    width:300px;
    height:300px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
    align-self: flex-end;
}
.a3{
    width:300px;
    height: 400px;
    background-color: red;
    margin-top: 7px;
    margin-left: 5px;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

a2的对齐方式为从下开始，其余盒子从上开始。

注意：弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。

码农公寓