flex布局
flex布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }
Webkit 内核的浏览器,必须加上-webkit
前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意,设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction属性
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
flex-direction
属性决定主轴的方向(即项目的排列方向)。
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex1 {
display: flex;
display: -webkit-flex;
}
div {
margin: 5px;
height: 50px;
background: yellow;
flex: 1;
}
.row {
flex-direction: row;
}
.row-reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column-reverse {
flex-direction: column-reverse;
}
</style>
<body>
<section class="flex1 row">
<div>1 flex-direction:row(默认值):主轴为水平方向,起点在左端</div>
<div>2</div>
<div>3</div>
</section>
<br/>
<br/>
<br/>
<section class="flex1 row-reverse">
<div>1 row-reverse:主轴为水平方向,起点在右端</div>
<div>2</div>
<div>3</div>
</section>
<br/>
<br/>
<br/>
<section class="flex1 column">
<div>1 column:主轴为垂直方向,起点在上沿 </div>
<div>2</div>
<div>3</div>
</section>
<br/>
<br/>
<br/>
<section class="flex1 column-reverse">
<div>1 column-reverse:主轴为垂直方向,起点在下沿 </div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>