flex伸缩布局
flex弹性概念:弹性盒子是一种按行或者按列布局元素的一种布局方式。
它是需要父子盒子嵌套使用的。
作用在父盒子(容器)上的属性有:
flex-direction
改变轴方向flex-wrap
换行flex-flow
前两项的简写方式justify-content
主轴对齐方式align-items
侧轴对齐方式align-content
作用在子盒子(子项)上的属性有
order
flex-grow
扩展比例flex-shrink
收缩比例flex-basis
指定子项在主轴方向上的初始大小flex
align-self
容器属性
接下来咱们一起看看第一个属性:作用在父容器上控制子项的排列方式flex-direction
主轴方向
flex-direction 改变轴方向
flex-direction常用的属性值有这几个
column
纵向column-reverse
纵向翻转row
横向row-reverse
横向翻转
看个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
}
.main div {
width: 100px;
height: 100px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
可以看到,给父盒子设置display:flex
默认是横向排列,也就是说默认的主轴方向是横向,交叉轴方向是竖向。
接下来为父容器设置属性flex-direction: column-reverse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
flex-direction: column-reverse;
}
.main div {
width: 100px;
height: 100px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
可以看到它们竖向排列并且翻转了。也就是说主轴为纵向了,侧轴为横向。
flex-wrap 换行
常有属性有:
nowrap
(默认) 不换行wrap
换行wrap-reverse
换行且翻转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
flex-wrap: wrap;
}
.main div {
width: 100px;
height: 100px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
默认是不换行的,如果去掉flex-wrap: wrap
或者设置为nowrap
则展示效果如图:
flex-flow
flex-flow
是flex-direction和flex-wrap的缩写,具体这么使用的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
/* flex-direction: column;*/
/* flex-wrap: wrap; */
flex-flow: column wrap;
}
.main div {
width: 100px;
height: 100px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
可以看到当设置了flex-flow: colum wrap
之后,子项布局既纵向排列了又换行了。
justify-content 主轴对齐方式
常用属性有:
flex-start
左对齐flex-end
右对齐center
居中space-around
两端对齐,两侧距离盒子距离是每个盒子间距的一半space-between
两端对齐,两侧紧挨盒子space-evenly
平均分配,子项距离盒子两侧和每个子项之间都是相等的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
justify-content: flex-start;
/* justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly; */
}
.main div {
width: 100px;
height: 100px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<!-- <div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div> -->
</div>
</body>
</html>
flex-start
flex-end
center
space-around
space-between
space-evenly
align-items 单行侧轴对齐方式
常用属性有:
stretch
(默认) 拉伸flex-start
flex-end
center
stretch 拉伸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
align-items: stretch;
/* align-items:flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline; */
}
.main div {
width: 100px;
/* height: 100px; */
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
flex-start
flex-end
center
align-content 多行侧轴对齐方式
该属性需要配合flex-wrap: wrap
一起使用,没有这个属性,align-content
是不生效的
常用属性有:
stretch
(默认)拉伸flex-start
flex-end
center
space-around
space-between
space-evenly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
flex-wrap: wrap;
/* 当不折行的情况下,align-content是不生效的 */
align-content:space-evenly;
}
.main div {
width: 100px;
height: 100px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
space-evenly
center
其他属性值效果大家可以自己试试,这里就不再赘述。
子项相关属性
flex-grow
默认值是0,也是最小值,不能为负数。
表示不占用剩余的空白间隙扩展自己的宽度
flex-grow的值大于等于1时表示占满剩余宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 300px;
background: skyblue;
display: flex;
}
.main div {
width: 100px;
height: 100px;
background: pink;
/* flex-grow: 0; 默认的 */
/* 如果比例值为1,就占满剩余的所有空间 */
/* 400 * 0.5 -> 200 + 100 -> 300 */
/* flex-grow: 0.5; */
/* 当比例值大于等于1的时候,都会占满整个空间 */
flex-grow : 2;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
</div>
</body>
</html>
当flex-grow: 0.5
时 扩展的宽度就是剩余宽度的一半
flex-shrink
默认值是1,表示flex容器空间不足时元素的收缩比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width:500px;
height:200px;
background:skyblue;
display: flex;
}
.main div{
width:600px;
height:100px;
background:pink;
/* flex-shrink : 1; 自动收缩,跟容器大小相同 */
/* flex-shrink: 0; */
flex-shrink: 0.5;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
</div>
</body>
</html>
flex-basis
默认值是auto, 指定了flex元素在主轴方向上的初始大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width:500px;
height:500px;
background:skyblue;
display: flex;
}
.main div{
width:100px;
height:100px;
background:pink;
flex-basis: 200px;
}
</style>
</head>
<body>
<div class="main">
<div></div>
</div>
</body>
</html>
flex
flex 是flex-grow flex-shrink flex-basis的缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width:500px;
height:500px;
background:skyblue;
display: flex;
align-items: flex-start;
}
.main div{
background:pink;
/* flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%; */
flex:1;
/* flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%; */
/* flex:0; */
/* flex-grow: 1;
flex-shrink: 1;
flex-basis: auto; */
/* flex:auto; */
/* flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%; */
/* flex:1 0 50%; */
}
</style>
</head>
<body>
<div class="main">
<div>测试文字</div>
</div>
</body>
</html>
order
默认值是0 改变某一个flex子项的排序位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width:500px;
height:500px;
background:skyblue;
display: flex;
}
.main div{
width:100px;
height:100px;
background:pink;
}
.main div:nth-of-type(1){
order:1;
}
.main div:nth-of-type(4){
order:-1;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
align-self
默认值0 控制某一个flex子项的垂直对齐方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width:500px;
height:500px;
background:skyblue;
display: flex;
align-items: center;
}
.main div{
width:100px;
height:100px;
background:pink;
}
.main div:nth-of-type(1){
}
.main div:nth-of-type(4){
height:50px;
/* align-self: auto; */ /* auto会跟父盒子的align-items属性保持一致*/
align-self: flex-end;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
以上就是flex
伸缩布局的全部基本内容啦