目录
一、什么是弹性盒子?
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
布局原理:给父盒子添加flex属性,控制子盒子的位置和排列方式。
在讲相关属性之前,我们需要知道主轴和侧轴的概念。
默认的主轴是x轴,侧轴是y轴。
二、父项常见属性
1.flex-direction
flex-direction用来设置主轴(子元素沿主轴排列)
- row(默认值)x轴从左到右
- row-reverse x轴从右到左
- column y轴从上到下
- column-reverse y轴从下到上
<style>
.item1,
.item2,
.item3 {
width: 100px;
height: 100px;
background-color: coral;
margin: 10px;
color: white;
line-height: 100px;
text-align: center;
}
</style>
<body>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
①flex-direction:row;
<style>
.container {
width: 300px;
height: 200px;
background-color: #ccc;
display: flex;
flex-direction: row;
</style>
这是默认的子元素排序方式,从左到右排序且靠紧父级左边框。
②flex-direction:row-reverse;
<style>
.container {
display: flex;
flex-direction: row-reverse;
</style>
这是反转横向排列-------从右到左排列且靠紧父级右边框。
③flex-direction:column;
<style>
.container