弹性盒子模型（1)

最新推荐文章于 2023-09-13 17:38:11 发布

THER1881

最新推荐文章于 2023-09-13 17:38:11 发布

阅读量522

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/thwr1881/article/details/124436829

版权

弹性盒子模型

一、布局模式：

通过之前的学习我们已经学习了两种布局模式，分别是Tbael布局和div+css的盒子模型，而除了这两种布局模式，还有一种布局模式就是弹性盒子模型布局，而弹性盒子模型( Flexible Box)则是CSS3新增的一种布局方式，是一种新的用于在HTML页面实现布局的方式。使得当HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。弹性盒子模型依旧使用div，但需要将div的display属性变为flex。

二、基本属性

1、容器(flex container)：是一个块级标签(可以包含其他的页面元素)
2、项目(flex item)：又称为子项(包含在容器的元素)
3、排列方向(direction)：元素的布局方向

三、容器属性

1、flex-direction属性

flex-direction属性是用来定义容器中的布局方式也可以说是排列方式的一种属性，它分别有4种取值：

flex-direction属性取值	作用
row（默认值）	排列的主轴方向为水平排列，从左到右的方式排列
row-reverse	排列的主轴方向为水平,从右往左的方式排列
columm	主轴方向为垂直方向，从上到下排列
column-reverse	主轴方向也为垂直方向，从下到上排列

flex-direction四种取值已经在表格中列出来了，接下来就一一用代码展示出来

1.1、flex-direction：row

代码展示

<!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>flex-direction</title>
</head>
<style>
.one,.two,.three{
   
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 20px;
    color: black;
    line-height: 200px;
    text-align: center;
}
.d1{
   
    display: flex;
    flex-direction: row;
}
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    
</body>
</html>

效果如下
在这里插入图片描述

可以看到在将div的display属性改为flex以及使用了flex-direction属性之后，我们在并没有使用浮动标签的情况下，使三个div水平自左向右排列。

1.2、flex-direction：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>flex-direction</title>
</head>
<style>
.one,.two,.three{
   
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 20px;
    color: black;
    line-height: 200px;
    text-align: center;
}
.d1{
   
    display: flex;
    flex-direction: row-reverse;
}
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    
</body>
</html>

效果如下：

在这里插入图片描述

可以看到在设置为row-reverse后，排列主轴依旧为水平排列，不过变为了自右向左。

1.3、flex-direction：columm

代码展示

<!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>flex-direction</title>
</head>
<style>
.one,.two,.three{
   
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 20px;
    color: black;
    line-height: 200px;
    text-align: center;
}
.d1{
   
    display: flex;
    flex-direction: column;
}
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    
</body>
</html>

效果如下：
在这里插入图片描述

可以看到在设置为column属性后，排列主轴变为垂直排列，排列顺序也变成了自上而下。

1.4、flex-direction：columm-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>flex-direction</title>
</head>
<style>
.one,.two,.three{
   
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 20px;
    color: black;
    line-height: 200px;
    text-align: center;
}
.d1{
   
    display: flex;
    flex-direction: column-reverse;
}
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    
</body>
</html>

在这里插入图片描述

可以看到在设置为column-reverse属性后，排列主轴依旧为垂直排列，排列顺序则变成了自下而上。

2、flex-wrap：

flex-wrap属性是定义容器内的元素是否换行，有三种取值：

flex-wrap属性取值	作用
nowrap	默认值,不换行
wrap	换行,第一行在上方
wrap-reverse	换行,第一行在下方

接下来我们继续一一用代码来将这些取值展示出来

2.1、wrap

代码展示

<!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>flex-wrap</title>
</head>
<style>
.one,.two,.three{
   
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 20px;
    color: black;
    line-height: 200px;
    text-align: center;
}
.d1{
   
    width: 500px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    
</body>
</html>
</

最低0.47元/天解锁文章

THER1881

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性盒子模型（1)

弹性盒子模型1、布局模式：通过之前的学习我们已经学习了两种布局模式，分别是Tbael布局和div+css的盒子模型，而除了这两种布局模式，还有一种布局模式就是弹性盒子模型布局，而弹性盒子模型( Flexible Box)则是CSS3新增的一种布局方式，是一种新的用于在HTML页面实现布局的方式。使得当HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。弹性盒子模型依旧使用div，但需要将div的display属性变为flex。2、基本属性(1)容器(flex container)：是一
复制链接

扫一扫