弹性(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