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

最新推荐文章于 2023-05-15 21:38:47 发布
原创 最新推荐文章于 2023-05-15 21:38:47 发布 · 1.2k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #html5 #html
本文详细介绍了CSS弹性盒子布局，包括基本概念、容器属性和项目属性。通过实例展示了flex-direction、flex-wrap、justify-content、align-items等属性的用法，并解析了它们在不同场景下的效果，帮助开发者掌握flex布局技巧。

文章目录

前言

       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布局就是通过给父盒子添加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;
    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布局后，子元素的float、clear、vertical-align属性将失效，因为它此时会自动实现float后才能实现的功能，让元素在一行显示。
2、任何一个容器都可以指定为flex布局，不只是块级元素，行内元素也可以，比如：

<!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;
    margin-left: 5px;
}
 </style>
<body>
    <div class="a">
        <span class="a1">1</span>
        <span class="a2">2</span>
    </div>
</body>
</html>

此时它在浏览器中呈现的效果为：
在这里插入图片描述如果此时给父元素加了flex属性：

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

在这里插入图片描述

二、弹性盒子的容器属性

默认主轴方向：x轴方向，水平向右；
默认侧轴方向：y轴方向，水平向下。

1、flex-direction：布局方向（主轴方向）

flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看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的右边，证明此时布局的方向是从右边开始。

下面我们修改上面的代码，把主轴设置为y轴，看一看元素的排列情况：

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

在这里插入图片描述

2、flex-wrap：环绕效果（子元素是否换行）

默认情况下，项目都排在一条线（又称轴线）上，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：对齐方式（主轴上的子元素排列方式）

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（设置侧轴上的子元素排列方式，单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

属性值说明
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（默认值）设置子项元素高度平分父元素高度

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

现在我们来看看align-content: space-between;的显示效果：

<!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: 800px;
    height: 600px;
    background-color: pink;
    display: flex;
    flex-direction: row;/* 确定主轴 */
    flex-wrap: wrap;/* 设置可以换行，所以此时会有多行侧轴，此时我们侧轴上控制子元素的对齐方式用align-content */
    align-content: space-between;
}
.a1,.a2,.a3,.a4,.a5,.a6,.a7{
    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 class="a4">a4</div>
        <div class="a5">a5</div>
        <div class="a6">a6</div>
        <div class="a7">a7</div>
    </div>
</body>
</html>

在这里插入图片描述

align-content和align-items的区别

1、align-items适用于单行情况下，只有上对齐，下对齐，居中和拉伸；
2、align-content适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐，下对齐，居中，拉伸，平均分配剩余空间等属性值；
3、总结：单行找align-items，多行找align-content。

三、弹性盒子的项目属性

1、flex属性

定义子项目分配剩余空间，用flex来表示占多少份数。它的属性值为数字，默认为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 {
    width: 800px;
    height: 600px;
    background-color: pink;
    margin: 0 auto;
    display: flex;
}
.a1,.a3{
    width:200px;
    background-color: red;
}
.a2{
    flex: 1;/* 表示它占满所有的剩余空间 */
    background-color: green;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

在这里插入图片描述如果我们想要实现三等分，也可以使用flex属性来完成：

<!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: 800px;
    height: 600px;
    background-color: pink;
    margin: 0 auto;
    display: flex;
}
.a1,.a2,.a3{
    flex: 1;/* 当不给子元素设置宽度时，会默认剩余空间是父盒子的所有，所以我们只要给每个子元素都设置flex为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值的设置使子项按比例分配剩余空间，如：

<!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: 800px;
    height: 600px;
    background-color: pink;
    margin: 0 auto;
    display: flex;
}
.a1,.a3{
    flex: 1;/* 当不给子元素设置宽度时，会默认剩余空间是父盒子的所有，所以我们只要给每个子元素都设置flex为1，他们每个都占剩余空间的一份，即最后的结果就会平分父盒子的宽度 */
}
div div:nth-child(2){
    flex: 2;/* 此时会把父盒子分为四份，盒子a2占两份，其他盒子占一份 */
    background-color: yellow;
}
 </style>
<body>
    <div class="a">
        <div class="a1">a1</div>
        <div class="a2">a2</div>
        <div class="a3">a3</div>
    </div>
</body>
</html>

在这里插入图片描述

2、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排列在最左边。

3、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的两倍。

4、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缩小。

5、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的对齐方式为从下开始，其余盒子从上开始。
在这里插入图片描述

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

弹性盒子（flexbox）布局属性详解
热门推荐
橘猫吃不胖的博客
10-28 5万+
弹性盒子布局属性详解1 弹性盒子概述2 基本概念3 常用属性3.1 布局方向flex-direction3.2 环绕效果flex-wrap3.3 水平对齐方式justify-content3.4 交叉轴对齐方式align-items3.5 轴线对齐方式align-content4 项目属性(item)4.1 排列顺序order4.2 放大比例flex-grow4.3 缩小比例flex-shrink4.4 单个对齐方式align-self4.5 综合属性flex 1 弹性盒子概述 Flexbox 是 flex
弹性盒子的属性
Clover ‘s Blog
05-15 1850
justify-content：指定弹性盒子在主轴上的对齐方式，属性值可以是 flex-start（默认值，从起点对齐）、flex-end（从终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）或 space-around（每个项目两侧的间距相等）。属性值可以是 flex-start、flex-end、center、space-between、space-around 或 stretch（默认值，每条轴线占满整个交叉轴）。flex：指定项目的伸缩比例，默认为 0。
如何使用弹性布局摆盒子，且盒子与盒子之间有距离？
ljhfi的博客
03-18 391
弹性布局： display:flex;
8.2知识点总结——弹性盒子
m0_60175058的博客
08-02 1152
一、justify-content justify-content:center;整体居中 justify-content:space-around;盒子的左右的间距与设置相同的左右margin值大小相同 justify-content:space-between;左右两边贴边，中间间距相同 justify-content:space-evenly;盒子间距完全相同,平均分配空白空间 二、flex-direction flex-direction:row;设...
弹性布局小技巧
thisnewpoaple的博客
08-10 7178
弹性布局小技巧 大对数人刚学完弹性布局时候会很疑惑，写出来的东西总是不尽人意，总有那种我明明是这样想的，为什么出来是另一种效果 弹性布局对图片的处理 有时候我们会直接用弹性布局去做图片，比如三张图片往里一放，父级直接加弹性布局display:flex;justify-content:space-around; 结果出来的图片重叠在了一起，感觉图片太大了，又去调图片大小50%，调了之后，完了，图片变...
CSS 弹性盒子布局详解
Mq_sir的博客
07-07 5453
CSS 弹性盒子 弹性盒子是CSS3的一种新布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 弹性盒子布局是一种在前端HTML开发中比较常用的布局方式，还有一些像网格布局，我比较喜欢用弹性盒子布局。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 一、介绍 在学习弹性盒子我们必须掌握的： 容器存在两条轴：横轴和纵轴 父容器属性定义为display：flex，表示该元素内部是弹性盒子布局 大体结构分为 一个父
CSS3弹性盒子布局
aiolos1111的专栏
07-29 9866
CSS3中引入的弹性盒子布局已经有一段时间，也经历了几次比较重大的修改，可本人一直都没怎么使用过这种布局，惭愧万分！这几天研究了一下这种布局方式，记录一下学习笔记，以后日后用到时过来查看。       2016年5月26日，W3C(官网：https://www.w3.org/ )组织发布了CSS3弹性盒子布局最新的CR版本： 网址：https://www.w3.org/TR/2016/CR-css
CSS布局之“弹性盒子布局”
weixin_54834631的博客
07-13 3341
弹性盒子，通常被称为 flexbox，是一种一维的布局模型。它给弹性元素提供了强大的空间分布和对齐能力，极大的方便了网页的布局和美化。但是对于初学者来说，初次接触弹性盒子这一概念有些模糊，本文通过总结和梳理弹性盒子的概念和属性，更好的帮助大家学习弹性盒子。限于本人知识有限，文章难免有不如意之处，欢迎大家在评论区讨论，我也会虚心听取大家的意见，积极改正。（1）弹性盒子布局（Flexbox Layout），元素可以拉伸以填充额外的空间，也可以收缩以适应更小的空间。（2）Flexbox可以解决弹性元素在弹性容器中
CSS 弹性盒子布局使用方法介绍
Jay的博客
10-25 2896
CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。
超详细！弹性盒子(display:flex)
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
C3之弹性盒子
qq_46179838的博客
04-20 1155
flex盒子常用属性一、父元素1、flex-direction2、flex-wrap3、justify-content4、align-items5、align-content二、子元素1、order2、align-self3、flex-grow4、flex-shrink5、flex-basis三、flex-basis和width的联系flex应用一、动态增加导航栏二、等分布局（四等分、二等分，中间可加margin）三、其中一个固定宽度的布局（固定一个、固定两个······）四、圣杯布局 常用属性 一、父元素
弹性盒布局（flex布局）
jia嘉ioo的博客
01-05 354
弹性盒子布局
小程序学习：弹性盒子flex布局
weixin_42195593的博客
05-22 5153
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 flex容器有6个属性： flex-direction f...
css 使盒子之间有间距 两边对齐
Yangli_nn的博客
08-09 6444
大盒子： margin-left :-10px; margin-right : -10px； 小盒子设置边距： 1） padding-left: 10px; padding-right :10px; 2) margin-left: 10px; margin-right: 10px; <function> 固定宽度 <function-item> 不设置宽度 margin-left:-10px; margin-right:-
04-弹性盒子换行
我的成长历程
10-14 774
使用few-warp实现弹性盒子多行排列效果
Flex布局相关知识点
MYNN13的博客
07-17 5016
flex布局
弹性盒子对齐方式总结【建议收藏】
oLylia的博客
08-27 5262
CSS：弹性盒子的对齐方式总结
弹性布局的多种布局应用
id2359955624的博客
07-21 742
弹性布局的多种布局应用
css让每个元素之间隔开
qq_35353972的博客
12-27 3593
css让每个元素之间隔开
弹性盒子的布局
jan_ping的博客
02-13 6846
1 弹性盒子(弹性布局) 1.1 弹性布局介绍 Flexbox是flexible box的简称(意思是"灵活的盒子容器")，是CSS3引入的新的布局模式。它决定了 元素如何在页面商排列，使他们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内地元素，以最大限度地填充可用空 间。与以前布局方式(如table布局和浮动元素内嵌元素)相比，Flexbox是一个更强大的方式 （1）在不同方向排列元素 （2）重新排列元素的显示顺序 （3）更改元
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值