弹性（flex）布局
为盒模型提供最大的灵活性
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
六个属性
| 属性 | 作用 |
|---|---|
| flex-direction | 决定主轴的方向（即项目的排列方向） |
| flex-wrap | 如何换行 |
| flex-flow | flex-diretion和flex-wrap的综合使用 |
| justify-content | 定义了项目在主轴上的对齐方式 |
| align-items | 定义项目在交叉轴上的如何对齐 |
| align-content | 定义了多根轴线的对齐方式 |
●flex-direction属性
主轴的方向！
| 属性 | 效果 |
|---|---|
| row（默认值） | 主轴为水平方向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在右端 |
| column | 主轴为垂直方向，起点在上沿 |
| column-reverse | 主轴为垂直方向，起点在下沿 |
例【1-1-1】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex属性</title>
<style type="text/css">
#div_fu{
width: 600px;
height: 600px;
border: red solid 2px;
margin: 0 auto;
/* 让div_fu成为一个弹性布局 */
display: flex;
/*各种属性对应的效果在下面*/
/* 1.row属性 */
/* flex-direction:row; */
/* 2.row-reverse*/
/* flex-direction: row-reverse; */
/* 3.column属性 */
/* flex-direction: column; */
/* 4. column-reverse*/
flex-direction: column-reverse;
}
#div_fu div{
text-align: center;
font-size: 60px;
width: 100px;
height: 100px;
}
.div_01{
background-color: skyblue;
}
.div_02{
background-color: red;
}
.div_03{
background-color:green;
}
.div_04{
background-color:orange;
}
</style>
</head>
<body>
<div id="div_fu">
<div class="div_01">1</div>
<div class="div_02">2</div>
<div class="div_03">3</div>
<div class
最低0.47元/天 解锁文章
2591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
