弹性盒子模型（1)

最新推荐文章于 2025-03-29 16:43:07 发布
原创 最新推荐文章于 2025-03-29 16:43:07 发布 · 636 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html5 #css3
本文详细介绍了CSS3中的弹性盒子模型，包括布局模式、基本属性和容器属性，如flex-direction、flex-wrap、flex-flow、justify-content、align-items以及align-content等，帮助理解如何在不同场景下使用这些属性实现灵活的布局效果。

弹性盒子模型

一、布局模式：

通过之前的学习我们已经学习了两种布局模式，分别是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>

效果展示
在这里插入图片描述

当给div设置了宽度之后，当宽度不足以容纳下三个元素时，这时就使用flex-wrap：warp，就可以自动换到下一行

2.2、flex-wrap：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>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-reverse;
}
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    
</body>
</html>

在这里插入图片描述

使用了wrap-reverse这个取值之后，换行顺序就会变为在第一行下方，顺序会颠倒过来。

3、flex-flow属性

flex-flow属性是flex-direction和flex-wrap的简写,默认值为row nowrap

代码展示

<!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{
    width: 500px;
    display: flex;
    flex-direction: row;
    flex-flow: row-reverse wrap;
}
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    
</body>
</html>

在这里插入图片描述

flex-flow属性就是将flex-direction和flex-wrap结合成一种属性，这样做的最大好处就是可以使代码看起开非常的简洁。

4、justify-content

justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

justify-content 属性取值取值
flex-start左对齐(默认) 。注意：表示容器的开始
space-between两端对齐,子项之间的宽度是相等的
flex-end右对齐(表示容器的结尾)
center居中
space-around每个项目(子项)两侧的间距相等

justify-content属性的常用取值一共有以上4个，接下来我们继续一一用代码来将这些取值展示出来

4.1、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>justify-content</title>
</head>
<style>
    .one,.two,.three{
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: cyan;
        color: black;
        text-align: center;
        line-height: 200px;
    }
    .d1{
        width: 800px;
        border: solid 1px black;
        display: flex;
        justify-content: space-between;
    }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
</body>
</html>

效果如下

在这里插入图片描述

space-between是两端和边框对齐，子项之间保持距离一致。

4.2、flex-end

代码展示

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

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

flex-end取值是指元素从行尾末端位置开始排列，而且和flex-direction：row-reverse不同，flex-end是顺序不变，只是将元素从行尾位置开始排列，而row-reverse使用后元素顺序会变化，最先的元素会到末端，因为row-reverse是自右向左排列，flex-end则只是所以需要注意两者的区别。

4.3、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>justify-content</title>
</head>
<style>
    .one,.two,.three{
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: cyan;
        color: black;
        text-align: center;
        line-height: 200px;
    }
    .d1{
        width: 800px;
        border: solid 1px black;
        display: flex;
        justify-content: center;
    }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
</body>
</html>

效果如下

在这里插入图片描述

center这个取值是我们的老熟人了，基本上使用它就是为了使元素居中，就不过多介绍了。

4.4、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>justify-content</title>
</head>
<style>
    .one,.two,.three{
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: cyan;
        color: black;
        text-align: center;
        line-height: 200px;
    }
    .d1{
        width: 800px;
        border: solid 1px black;
        display: flex;
        justify-content: space-around;
    }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
</body>
</html>

效果展示
在这里插入图片描述

space-around是使每个项目之间的间距都保持一致

5、align-items：

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

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

代码展示

<!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>Document</title>
</head>
<style>
      .d1{
          width: 800px;
          height: auto;
          background-color:cyan;
          display: flex;
          flex-direction: row;
          align-items:flex-start;
      }
      .one{
          width: 100px;
          height: 80px;
          background-color: brown;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .two{
          width: 80px;
          height: 100px;
          background-color: blue;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .three{
          width: 150px;
          height: 100px;
          background-color: darkgoldenrod;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .four{
          width: 100px;
          height: 150px;
          background-color: green;
          color: black;
          text-align: center;
          line-height: 150px;
          margin: 20px;
      }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</body>
</html>

在这里插入图片描述

flex-start是以交叉轴的起点对齐

5.2、flex-end

代码展示

<!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>Document</title>
</head>
<style>
      .d1{
          width: 800px;
          height: auto;
          background-color:cyan;
          display: flex;
          flex-direction: row;
          align-items:flex-end;
      }
      .one{
          width: 100px;
          height: 80px;
          background-color: brown;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .two{
          width: 80px;
          height: 100px;
          background-color: blue;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .three{
          width: 150px;
          height: 100px;
          background-color: darkgoldenrod;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .four{
          width: 100px;
          height: 150px;
          background-color: green;
          color: black;
          text-align: center;
          line-height: 150px;
          margin: 20px;
      }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</body>
</html>

在这里插入图片描述

flex-end是以交叉轴的终点对齐

5.3、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>Document</title>
</head>
<style>
      .d1{
          width: 800px;
          height: auto;
          background-color:cyan;
          display: flex;
          flex-direction: row;
          align-items:center;
      }
      .one{
          width: 100px;
          height: 80px;
          background-color: brown;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .two{
          width: 80px;
          height: 100px;
          background-color: blue;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .three{
          width: 150px;
          height: 100px;
          background-color: darkgoldenrod;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .four{
          width: 100px;
          height: 150px;
          background-color: green;
          color: black;
          text-align: center;
          line-height: 150px;
          margin: 20px;
      }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</body>
</html>

在这里插入图片描述

5.4、baseline
<!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>Document</title>
</head>
<style>
      .d1{
          width: 800px;
          height: auto;
          background-color:cyan;
          display: flex;
          flex-direction: row;
          align-items:baseline;
      }
      .one{
          width: 100px;
          height: 80px;
          background-color: brown;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .two{
          width: 80px;
          height: 100px;
          background-color: blue;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .three{
          width: 150px;
          height: 100px;
          background-color: darkgoldenrod;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .four{
          width: 100px;
          height: 150px;
          background-color: green;
          color: black;
          text-align: center;
          line-height: 150px;
          margin: 20px;
      }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</body>
</html>

效果展示
在这里插入图片描述

在这里可以看到我虽然设置了baseline，但好像和center一样，这是因为baseline是以项目第一行文字为基线对齐，我的字体设置的是居中，所以效果看起来和center效果一样

5.5、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>Document</title>
</head>
<style>
      .d1{
          width: 800px;
          height: 500px;
          background-color:cyan;
          display: flex;
          flex-direction: row;
          align-items:stretch;
      }
      .one{
          width: 100px;
          
          background-color: brown;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .two{
          width: 80px;
         
          background-color: blue;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .three{
          width: 150px;
          
          background-color: darkgoldenrod;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .four{
          width: 100px;
          
          background-color: green;
          color: black;
          text-align: center;
          line-height: 150px;
          margin: 20px;
      }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</body>
</html>

在这里插入图片描述

stretch是align-items的默认值。元素被拉伸以适应容器。

6、align-content

align-content 属性是多根轴线的对齐方式，并且只有在设置多根轴线时才会有效，在单根轴线时属性无效。

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

align-content属性的取值一共有6个，他的设置方式和align-items相似，只不过它是定义多跟轴线的对齐方式，接下来我们举个例子来展示他们的样子。

<!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>Document</title>
</head>
<style>
      .d1{
          width: 800px;
          height: 800px;
          background-color:cyan;
          display: flex;
          flex-flow: row wrap;
          align-content:center;
      }
      .one{
          width: 100px;
          height: 80px;
          background-color: brown;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
      }
      .two{
          width: 80px;
         height: 100px;
          background-color: blue;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .three{
          width: 150px;
          height: 100px;
          background-color: darkgoldenrod;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .four{
          width: 100px;
          height: 150px;
          background-color: green;
          color: black;
          text-align: center;
          line-height: 150px;
          margin: 20px;
      }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</body>
</html>

在这里插入图片描述

center元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。

THER1881
关注
弹性盒模型（详解）
weixin_46726346的博客
10-18 5821
摘要 关于弹性盒模型，属性也是比较多，属性的值也是比较杂，所以看起来也是比较吃力，总是学习的时候似乎已经掌握了，慢慢不用的话一些属性又不会了。 这一篇文章，只去理解弹性盒模型的属性，而不会列出所有属性的值。 重点在于理解，而非去死记硬背。 1.创建弹性盒子 所有人应该都知道我们应该使用display:flex来创建一个弹性盒子。 但是其实还有另一种创建方式：display:inline-flex。 乍一看这个属性和display:block , display:inline-block是不是有一点点像。 其
CSS基础笔记七，怪异盒子和弹性盒子（弹性盒子的属性，子容器镜像（flex-direction），水平（justify-content），垂直（align-itmes），子容器的权重（flex-数））
qq_55006020的博客
06-28 5445
标准盒子模型，外边距（margin），内边距（padding），线宽（border），内容。内边距和线框会撑开容器怪异盒子模型，外边距（margin），内边距（padding），线框（border），内容。内边距和相框会压缩容器怪异盒子的开启，box-siziing：bober-box 把标准盒子变成怪异盒子content-box 把怪异盒子变成标准盒子弹性盒子模型。通过设置弹性盒子模型，可以更改子容器在父级容器的平均摆放距离开启：display-flex子容器会自动横向摆放。
Flexbox弹性盒子详解
qq_63447955的博客
10-11 4686
项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。然而，这些方式对于某些特殊布局，如垂直居中布局，却难以达到理想效果。为了解决这一问题，W3C于2009年提出了一种新的布局方案——Flex布局（Flexible Box，简称flexbox）。三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别。弹性容器内包含了一个或多个弹性子元素，这些子元素自动成为容器成员，其布局将受到容器属性的控制。
弹性盒子模型（Flexbox）：布局的高效解决方案
最新发布
qq_73885953的博客
03-29 798
CSS3 引入的弹性盒子模型（Flexbox）是一种更加高效、灵活的布局方式，特别适用于一维布局（即单行或单列）。它能够自动调整子元素的大小和位置，以适应不同的屏幕尺寸和设备，极大地简化了布局设计。
【前端】CSS-Flex弹性盒模型布局
山赶着山，山山漫漫结成关
09-01 7429
CSS弹性盒子（Flexbox）是一种强大而灵活的布局模型，能够简化我们对网页布局的控制，并使页面在不同设备上的适应性更强。本文将介绍CSS弹性盒子的基本概念、属性和使用方法，帮助你更好地掌握弹性盒子布局。决定主轴的方向（即项目的排列方向）弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap定义了项目在主轴上的对齐方式定义项目在交叉轴上如何对齐定义了多根轴线的对齐方式。
AppCan开发框架详细介绍
liuwen718的专栏
09-04 9790
1、UI2.0与UI1.0的对比 2012年初，我们发布了AppCan移动应用开发平台，在这个版本中，我们内置了基于JQMobile方案的CSS UI框架。这个框架可以帮助开发者遵循一套规则下，快速的开发应用。这套方案中主要采用了组合的概念。例如对一个按钮的描述，可以通过多个CSS类来组合进行定义，也可以通过视频了解更多。 这样通过不同的组合可以生成多变的效果。在实际商用应用开发过程中，它
AppCan开发框架
我以我名，行我道！
03-13 5381
1、UI2.0与UI1.0的对比 2012年初，我们发布了AppCan移动应用开发平台，在这个版本中，我们内置了基于JQMobile方案的CSS UI框架。这个框架可以帮助开发者遵循一套规则下，快速的开发应用。这套方案中主要采用了组合的概念。例如对一个按钮的描述，可以通过多个CSS类来组合进行定义，也可以通过视频了解更多。 这样通过不同的组合可以生成多变的效果。在实际商用应用开发过程中，它
弹性盒子模型属性之flex-grow
qq_45670012的博客
10-27 234
在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!! 今天就让我们先来看看flex-grow这个属性 flex-...
CSS-布局2-中间固定两边自适应
weixin_34414650的博客
07-12 272
1、布局概述 中间固定，两边自适应布局，这是一种非常罕见的布局。例如下图，测试剧中，这几个字固定宽度，左右的红线根据屏幕自适应。 image.png 2、实现思路1- 浮动加负边距 实现思路 （1） 创建左中右3个div。 （2）左边div各占50%宽度;左边div的左边负边距，设置为中间div宽...
关于line-height:1； flex:1； white-space: nowrap；的理解
weixin_44663523的博客
07-15 401
1、line-height:1; 根据该元素本身的字体大小 设置行高 比如该元素字体是15px line-height:1; 的行高就是15px; 2、flex:1; flex有三个参数：flex-grow,flex-shrink,flex-basic, 3、white-space: nowrap;//强制不换行
flex布局中的高度和宽度问题
chongjie8394的博客
05-24 2393
1. flex-grow的属性如果大于1, 会使width的设置失效. 2. height的属性如果是非auto的值, 会使align-item : stretch的设置失效. 转载于:...
CSS 让盒子垂直居中的几种方式
tikaso Page
08-03 895
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
CSS一个子元素固定宽度，另一个子元素宽度自适应
Alice_hhu的博客
06-22 742
弹性盒子 flex .parent { width: 100%; display: flex; } .child1 { width: 200px; } .child2 { flex: 1; }
【08】CSS盒子模型+弹性盒子模型详解
hejuan___的博客
12-28 2208
CSS盒子模型+弹性盒子模型详细解释
弹性盒子模型笔记
码小余の博客
03-29 1475
弹性盒子模型 一、弹性盒子模型的相关概念 ● 伸缩容器(flex container) :包裹伸缩项目的父元素。 ● 伸缩项目(flex item) :伸缩容器的每个子元素。 ● 轴(axis):每个弹性盒子模型拥有两个轴。 ◆ 主轴(main axis) : :伸缩项目沿其一次排列的轴被称为主轴。 ◆ 侧轴(cross axis) :垂直于主轴的轴被称为侧轴。 ● 方向(direction):伸...
CSS3-弹性盒子模型
weixin_61006312的博客
10-06 899
css3-弹性盒子模型
css常用指南，弹性盒子模型、块标签横向排列、标签放一行、弹性盒子模型内的布局
道友
01-02 1195
css常用指南，弹性盒子模型、块标签横向排列、标签放一行、弹性盒子模型内的布局
前端中全部盒子靠左对齐_CSS3中的弹性盒子模型
weixin_39654848的博客
11-26 1690
新旧版本的弹性盒子模型在之前，css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言，旧版本的内容与新版本还是有些出入。而且，从功能上来讲，旧版本的弹性盒子模型远远没有新版本的盒子模型强大，从兼容性来讲，二者在pc端ie9以下都存在着兼容性问题，但是在移动端，旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说，我们依然要将主要的精力放在新版本的弹性盒子模型的身上，因为旧版本的弹...
深入理解CSS弹性盒子模型（Flexbox）
2301_79175212的博客
10-06 1966
在现代网页布局中，CSS弹性盒子模型（Flexbox）无疑是一个强大且灵活的工具。它简化了复杂布局的实现，尤其是在响应式设计中表现尤为出色。本文将详细介绍Flexbox的基本概念、核心属性以及如何在实际项目中应用Flexbox,一起来学习吧Flexbox，全称为Flexible Box Layout Module，是CSS3引入的一种布局模式。它旨在为容器中的项目提供更加灵活和高效的布局方式，能够轻松地在不同屏幕尺寸和设备上实现自适应布局。
轻松掌握CSS3最重要的弹性盒子模型（伸缩盒子模型）
2301_80743865的博客
11-23 2438
弹性盒子模型（Flexbox）是一种CSS布局模型，用于在页面上对齐和分配容器内的项目（子元素）。它旨在提供一种更有效的方式来布局、对齐和分配容器内项目的空间，即使它们的大小是未知或者动态变化的。Flexbox 主要特点包括：1. 主轴和交叉轴：Flexbox 定义了两个轴，主轴（main axis）和交叉轴（cross axis）。项目沿着主轴排列，而交叉轴垂直于主轴。2. 容器和项目：使用 display: flex;或 display: inline-flex;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值