3.1 常见父项属性
属性 | 功能 |
---|---|
flex-direction | 设置主轴的方向 |
justify-content | 设置主轴上的子元素排列方式 |
flex-wrap | 设置子元素是否换行 |
align-content | 设置侧轴上的子元素的排列方式(多行) |
align-items | 设置侧轴上的子元素的排列方式(单行) |
flex-flow | 复合属性,相当于同时设置了flex-direction和flex-wrap |
3.2 flex-direction 设置主轴的方向
3.2.1 主轴与侧轴
默认主轴方向为x轴方向,水平向右
默认侧轴方向为y轴方向,水平向下
元素按主轴排列
3.2.2 属性值
属性值 | 功能 |
---|---|
flex-direction: row(默认) | 主轴方向为x轴方向,水平向右 |
flex-direction: row-reverse | 主轴方向为x轴方向,水平向左 |
flex-direction: column | 主轴方向为y轴方向,水平向下 |
flex-direction: column-reverse | 主轴方向为y轴方向,水平向上 |
<!DOCTYPE html>
<html lang="zh-CN">
<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>
div {
display: flex;
width: 800px;
height: 300px;
background-color: blueviolet;
flex-direction: column;
}
div span {
width: 150px;
height: 100px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
3.3 justify-content 设置主轴上的子元素排列方式
属性值 | 说明 |
---|---|
flex-start(默认) | 从头部开始排列 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐 |
space-around | 平分剩余空间 |
space-between(重要) | 先两边贴边,再平分空间 |
<!DOCTYPE html>
<html lang="zh-CN">
<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>
div {
display: flex;
width: 800px;
height: 300px;
background-color: blueviolet;
flex-direction: row;
justify-content: space-between;
}
div span {
width: 150px;
height: 100px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
3.4 flex-wrap 设置子元素是否换行
flex默认子元素不换行,如果不够会缩小子元素
属性值 | 说明 |
---|---|
nowrap(默认) | 不换行 |
wrap | 换行 |
3.5 align-items 设置侧轴上的子元素的排列方式(单行)
属性值 | 说明 |
---|---|
flex-start(默认) | 从上到下 |
flex-end | 从下到上 |
center | 挤在一起居中(垂直居中) |
stretch | 拉伸 |
stretch在不给子元素高度时生效
3.6 align-content 设置侧轴上的子元素的排列方式(多行)
只能用于子项出现换行的情况
属性值 | 说明 |
---|---|
flex-start(默认) | 从上到下 |
flex-end | 从下到上 |
center | 挤在一起居中(垂直居中) |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,再平分剩余空间 |
stretch | 拉伸到平分空间 |
3.7 flex-flow
把设置主轴方向和是否换行合并
flex-flow: row wrap;
4 常见子项属性
4.1 flex 属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
.item {
flex: <number>; /* default 0 */
}
<!DOCTYPE html>
<html lang="zh-CN">
<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>
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: gray;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
4.2 align-self 控制子项自己在侧轴上的排列方式
可覆盖align-items属性
默认auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
<!DOCTYPE html>
<html lang="zh-CN">
<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>
div {
display: flex;
width: 80%;
height: 300px;
background-color: blueviolet;
/* align-items: flex-end; */
}
div span {
width: 150px;
height: 100px;
background-color: darkcyan;
}
div span:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
4.3 order 属性定义项目的排列顺序
默认是0,-1比0小所以在前面
<!DOCTYPE html>
<html lang="zh-CN">
<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>
div {
display: flex;
width: 80%;
height: 300px;
background-color: blueviolet;
/* align-items: flex-end; */
}
div span {
width: 150px;
height: 100px;
background-color: darkcyan;
}
div span:nth-child(2) {
order: -1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>