flex分为两个轴,主轴和副轴
一、主轴
1、flex-direction 定义主轴上的排列方向,它由4个值
row
row-reverse
column
column-reverse
(1)row (默认值)横向排列,以横坐标为主轴从左往右排 flex-direction: row;
(2)row-reverse 以横坐标为主轴,从右往左排列 flex-direction: row-reverse;
(3)column 以纵坐标为主轴,从上往下排 flex-direction: column;
(4)column-reverse 以纵坐标为主轴,从下往上排 flex-direction: column-reverse;
2、justify-content 用来使元素在主轴方向上对齐 常用的属性值有5个
flex-start
flex-end
center
space-around
space-between
(1) flex-start (默认初始值)以主轴为准,元素以主轴的起始点对齐 justify-content:flex-start;
(2)flex-end 以主轴为准,元素以主轴的终点对齐 justify-content:flex-end
(3)center 以主轴为准,元素从在最中心排列 justify-content:center;
(4) space-around 均匀排列每个元素之间的相同空间 (取决于主轴) justify-content:space-around;
(5) space-between 均匀分配两个元素两端对齐(取决于主轴) justify-content:space-between;
二、副轴
1、align-items 属性(单行)可以使所有(多个)元素在副轴的方向上对齐 它的常用属性值有4个
stretch
flex-start
flex-end
center
(1)stretch (默认初始值) 元素会在副轴上被拉伸 align-items:stretch;
(2)flex-start 可以设置项目开始端对齐align-items:flex-start;
(3)flex-end 可以设置项目的末端对齐align-items:flex-end;
(4)center 可以设置项目居中对齐align-items:center;
2、align-content 属性用于(多行)对齐 ,只能用于子元素换行的情况下使用,它的常用属性右5个
flex-start
flex-end
center
space-around
space-between
(1)align-content:flex-start; 上对齐
(2)align-content:flex-end; 下对齐
(3)align-content:center; 居中对齐
(4)align-content:space-around; 均匀排列两行元素之间的相同空间
(5)align-content:space-between; 均匀分配上下两行元素的两端对齐
(6)align-content 和 align-items 的区别
- align-items 适用于单行的情况下,只有上对齐,下对齐,居中,拉伸
- align-content 适用于换行(多行)的情况下(单行无效),可以设置上对齐,下对齐,居中,拉伸以及平均分配剩余空间等属性。
3、align-self 属性用于单个元素对齐
flex-start
flex-end
center
space-around
space-between
stretch
就好比如对第二个元素盒子进行单个拉伸 align-self:stretch;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 500px;
display: flex;
height: 500px;
background-color: antiquewhite;
align-items: baseline;
}
.con>:nth-child(2) {
align-self: stretch;
}
.con div {
width: 100px;
background-color: aqua;
margin: 10px 10px;
}
</style>
</head>
<body>
<div class="con">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
三、换行
flex-wrap 决定子元素是否换行,它有2个属性
(1)nowrap (默认不换行) 例如 我们有一个500px宽的父盒子,父盒子里面有六个100px宽的子盒子,默认不换行六个100px宽的盒子就会缩小自己的宽度,放在父盒子的一行上
(2)wrap (换行) 例如 我们有一个500px宽的父盒子,父盒子里面有六个100px宽的子盒子,可以设置wrap属性来自动换行
(3)flex-direction 和 flex-wrap 可以组合写成 flex-flow 第一个值指定flex-direction 第二个值指定 flex-wrap的值 flex-flow: row/column wrap/nowrap;
四、flex布局子项常见属性
- flex 子项目占的份数
- order 属性定义的排列顺序(前后排序)
(1)flex 属性定义子项目(在子盒子里写这个属性)分配剩余空间,用flex来表示占多少 份数 (默认是0份) flex: 份数; 例如 有三个子盒子如果 flex:1; 的话表示给三个盒子平均分配宽度。还可以指定某个子盒子的份数,例如指定第2个盒子所占的份数为6份
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 500px;
height: 500px;
display: flex;
background-color: antiquewhite;
}
.con div {
height: 100px;
background-color: aqua;
margin: 10px 10px;
}
.con div:first-child {
flex: 1;
}
.con div:nth-child(2) {
flex: 6;
}
.con div:nth-child(3) {
flex: 1;
}
</style>
</head>
<body>
<div class="con">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
(2)order 定义子盒子的排列顺序 (默认是0 ,-1比0小所以在前面) order:-1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 500px;
height: 500px;
display: flex;
background-color: antiquewhite;
}
.con div {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px 10px;
}
.con div:nth-child(2) {
order: -1;
}
</style>
</head>
<body>
<div class="con">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>