在传统布局中,我们依赖的是diplay+position+float,使特殊的布局非常不方便。那么今天我们说css3中的弹性盒子,使我们在进行布局时,更加的便捷。
1.display:flex表示的是把盒子设置为弹性盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html,#box {
width: 100%;
height: 100%;
}
#box {
/*表示的是把父盒子设置为弹性盒子*/
display: flex;
}
#box>div {
flex: 1;/*表示的是每个盒子占一份*/
height: 200px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
2.flex-direction表示的是盒子的排列方向,有三个属性值,分别为row、column、row-reverse、column-reverse。row表示的是水平从左到右排列,row-reverse表示的是水平从右往左排列,column表示的是垂直从上往下排列,column-reverse表示的是垂直从下往上排列。下面以column-reverse为例,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html,#box {
width: 100%;
height: 100%;
}
#box {
/*表示的是把父盒子设置为弹性盒子*/
display: flex;
/*表示垂直从下往上排列*/
flex-direction: column-reverse;
}
#box>div {
flex: 1;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
3.flex-wrap表示的是否换行,有三个属性,分别为:nowrap,wrap,wrap-reverse。nowrap表示的是 不换行,wrap表示的是换行,wrap-reverse表示的是换行并反转。下面以wrap-reverse为例,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html,#box {
width: 100%;
height: 100%;
}
#box {
/*表示的是把父盒子设置为弹性盒子*/
display: flex;
/*表示的是换行并且反转*/
flex-wrap: wrap-reverse;
}
#box>div {
width: 400px;
height: 200px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box1">4</div>
<div class="box2">5</div>
<div class="box3">6</div>
<div class="box1">7</div>
<div class="box2">8</div>
<div class="box3">9</div>
</div>
</body>
</html>
4.justify-content表示的是垂直方向上内容对齐属性,有五个属性值,分别是:flex-start、flex-end、center、space-between、space-around。其中,flex-start表示的弹性盒子向行头紧密填充、flex-end表示的是弹性盒子向行尾紧密填充,center表示的是居中紧密填充,space-between表示的是
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start,space-around表示的是弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html,#box {
width: 100%;
height: 100%;
}
#box {
/*表示的是把父盒子设置为弹性盒子*/
display: flex;
/*表示的是换行并且反转*/
flex-wrap: wrap;
/*表示的是对齐属性*/
justify-content: space-around;
}
#box>div {
width: 400px;
height: 200px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box1">4</div>
<div class="box2">5</div>
<div class="box3">6</div>
<div class="box1">7</div>
<div class="box2">8</div>
<div class="box3">9</div>
</div>
</body>
</html>
5.align-items表示的是垂直方向上的内容对齐属性,有五个属性值,分别是:flex-start、flex-end、center、baseline、stretch。其中flex-start、flex-end、center和上面justify-content的意义是一样的,baseline是以基线为准,stretch表示的是默认情况下的状态,被拉伸。下面以center为例,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html,#box {
width: 100%;
height: 100%;
}
#box {
/*表示的是把父盒子设置为弹性盒子*/
display: flex;
flex-direction: column;
/*表示的是换行并且反转*/
flex-wrap: wrap;
/*表示的是对齐属性*/
align-items: center;
}
#box>div {
width: 400px;
height: 100px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box1">4</div>
<div class="box2">5</div>
<div class="box3">6</div>
<div class="box1">7</div>
<div class="box2">8</div>
<div class="box3">9</div>
</div>
</body>
</html>
6.align-content
属性用于修改
flex-wrap
属性的行为。类似于
align-items
, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。属性值有:flex-start、flex-end、center、space-between、space-around、stretch。下面以space-around为例,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html,#box {
width: 100%;
height: 100%;
}
#box {
/*表示的是把父盒子设置为弹性盒子*/
display: flex;
/*表示的是换行并且反转*/
flex-wrap: wrap;
/*表示的是对齐属性*/
align-content: space-around;
}
#box>div {
width: 400px;
height: 100px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box1">4</div>
<div class="box2">5</div>
<div class="box3">6</div>
<div class="box1">7</div>
<div class="box2">8</div>
<div class="box3">9</div>
</div>
</body>
</html>
7.order是用来设置元素的顺序。属性值可以设置为number值,设置为几就位于第几位。
以上为基本常用的弹性盒子的属性。