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

2021/10/19 23:10:11

编程Tag： css 进阶 height flex margin a1 a2 盒子 200px

本文主要是介绍css进阶三（弹性盒子布局），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

  • 前言
  • 一、弹性盒子的基本概念
  • 二、弹性盒子的容器属性
    • 1、flex-direction：布局方向
    • 2、flex-wrap：环绕效果
    • 3、flex-flow
    • 4、justify-content：对齐方式
    • 5、align-items
    • 6、 align-content
  • 三、弹性盒子的项目属性
    • 1、order属性
    • 2、flex-grow属性
    • 3、flex-shrink属性
    • 4、align-self属性

前言

       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.www.zyiz.net/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的对齐方式为从下开始，其余盒子从上开始。

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



这篇关于css进阶三（弹性盒子布局）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程