弹性布局说明
弹性布局,又称“flex布局”,是由W3C老大哥于2009年瑞出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持,我们可以放心大胆的使用。
弹性布局的基本概念
1、容器:需要添加弹性布局的父元素;
2、项目:弹性布局容器中的每一个子元素,称为项目;
弹性布局的基本方向
1、主轴:在弹性布局中,我们会通过属性规定水平/垂直方向为主轴;
2、交叉轴:与主轴垂直的另一个方向,称为交叉轴。
弹性布局的使用
1、给父容器添加display:flex/inline-flex属性,即可使用容器内采用弹性布局显示,而不遵循常规文档流的显示方式;
2、容器添加弹性布局后,仅仅是容器内容采用弹性布局,而容器自身在文档流中的定位方式依然遵循常规文档流;
3、display:flex;容器添加弹性布局后,显示为块级元素;
display:inline-flex;容器添加弹性布局后,显示为行级元素;
4、设为flex布局后,子元素的float,clear和vertica-align属性将失效。但是position属性,依然生效。
##代码案例
<div id="div">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
</div>
<div id="div2"></div>
<style>
#div{
width: 400px;
height: 400px;
background-color: yellow;
display: flex;
}
#div div{
width: 100px;
height: 100px;
background-color: blueviolet;
color: wheat;
font-size: 30px;
/* float: right; */
/* position: absolute; */
/* left: 500px;
} */
#div2{
width: 400px;
height: 400px;
background-color: hotpink;
display: flex;
}
</style>
父容器的六大属性
1.flex-direction属性决定主轴的方向(即项目的排列方向)。
- row(默认值):主轴为水平方向,起点在左端;
- row-reverse:主轴在水平方向,起点在右端;
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
<style>
#div{
width: 300px;
height: 400px;
background-color: yellow;
display: flex;
flex-direction: row-reverse;/*左右颠倒方向 */
/* flex-direction: column-reverse; */
/* 上下颠倒方向,假设原来是1-5,现在从上到下变成5-1 */
}
#div div{
width: 100px;
height: 100px;
background-color: blueviolet;
color: wheat;
font-size: 30px;
/* flex-direction: :row-reverse; */
/* float: right; */
/* position: absolute; */
/* left: 500px;
} */
#div2{
width: 400px;
height: 400px;
background-color: hotpink;
display: flex;
}
</style>
</head>
<body>
<div id="div">
<div class="div1">1</div>
<div class="div2">2