移动端布局之Flex
1 Flex布局是什么？
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
2. Flex 布局体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局体验</title>
<style>
/*
采用flex布局的元素，称之为Flex容器（flex container），简称 容器，他的所有子元素自动成为容器成员，称之为Flex
项目（flex item）,简称 项目
- 下面代码中 div 就是 flex 父容器 flex container
- span 就是子容器 flex item
- 子容器可以横向排列也可以纵向排列
*/
div {
display: flex;
80%;
height: 300px;
background-color: pink;
justify-content: space-around;
}
div span {
height: 100px;
background-color: purple;
margin-right: 5px;
flex: 1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
3 Flex常用属性
3.1 设置主轴方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-direction</title>
<style>
div {
/* 给父级添加 flex */
display: flex;
800px;
height: 300px;
background-color: pink;
/* 默认的主轴是x轴 行row 即y轴就是侧轴
元素是跟着主轴排列的 */
/* 默认 row 即从左到右 翻转 row-reverse 即从右往左 */
/* flex-direction: row;
flex-direction: row-reverse; */
/* 主轴也可以设置为y轴 即x轴就成了侧轴 元素从上往下排列 同理 column-reverse 从下往上*/
flex-direction: column;
/* flex-direction: column-reverse; */
}
div span {
150px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
3.2 设置子元素排列方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>justify-content</title>
<style>
/* justify-content 属性定义了项目在主轴上的对齐方式
PS: 使用这个属性之前一定要确认好主轴是哪个
*/
div {
display: flex;
80%;
height: 500px;
background-color: pink;
/* 默认主轴就是row, x轴 可以不写 */
/* flex-direction: row; */
/* 默认flex-start
flex-start 头部对齐
flex-end 从尾部开始排列
center 居中
space-around 平分剩余空间 如主轴x轴 即每个item有相同的左右外边距
space-between 先两边贴边 再平分剩余空间 --常用
*/
/* justify-content: space-between */
/* 如果想设置子元素垂直居中 可以将主轴设置为y轴 再选择对齐方式为居中即可 */
flex-direction: column;
justify-content: center;
}
div span {
150px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
3.3 设置子元素是否换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-wrap</title>
<style>
/* flex布局中 默认子元素是不换行的 如果一行装不下 会修改子元素的宽度 */
div {
display: flex;
600px;
height: 400px;
background-color: pink;
/* 默认不换行 nowrap 换行 wrap */
flex-wrap: wrap;
}
div span {
150px;
height: 100px;
background-color: purple;
color: #ffffff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
3.4 设置侧轴上子元素对齐方式
注意：align-items适用于子元素单行显示 即 没有设置flex-wrap:wrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items</title>
<style>
/* 使用于子元素 只在单行上显示 */
div {
display: flex;
800px;
height: 400px;
background-color: pink;
flex-direction: column;
/* 主轴居中 */
justify-content: center;
/* 侧轴居中 */
align-items: center;
/* flex-wrap: wrap;
align-content: center; */
/* 拉伸 用这个值时 子元素不要给高度*/
/* align-items: stretch; */
}
div span {
150px;
height: 100px;
background-color: purple;
color: #ffffff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
3.5 多行子元素设置侧轴对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content</title>
<style>
/* 这个align-content 有没有效果 看flex-wrap是否为wrap 即使是单行 只要设置了换行就可以用align-content */
div {
display: flex;
800px;
height: 400px;
background-color: pink;
/* 换行 */
flex-wrap: wrap;
justify-content: center;
/* 有了换行 侧轴的对齐方式用 align-content */
/* align-content: center;*/
/* align-content: space-around; */
align-content: space-between;
}
div span {
150px;
height: 100px;
background-color: purple;
color: #ffffff;
margin: 0 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
</html>
3,6 复合属性 flex-flow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-flow</title>
<style>
div {
display: flex;
600px;
height: 300px;
background-color: pink;
flex-flow: column wrap;
}
div span {
150px;
height: 100px;
background-color: purple;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
3.7 flex子项份数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex份数</title>
<style>
/* flex属性定义子项目分配剩余空间 用flex来表示占多少份数 */
section {
display: flex;
65%;
height: 150px;
margin: 0 auto;
background-color: rgba(0, 0, 0, .4);
}
section div:nth-child(1) {
100px;
height: 150px;
background-color: pink;
}
section div:nth-child(3) {
100px;
height: 150px;
background-color: pink;
}
section div:nth-child(2) {
flex: 1;
background-color: skyblue;
}
p {
display: flex;
60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
background-color: rgba(0, 0, 0, .4);
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
3.8 控制单个子项侧轴上对齐方式 和 子项排序顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-self和order</title>
<style>
/* align-self:控制的是子项自己在侧轴上的对齐方式 */
/* order 数值越小 排列越靠前 默认是0 */
div {
display: flex;
80%;
height: 300px;
background-color: pink;
/* 让三个盒子都底部对齐 */
/* align-items: flex-end; */
}
div span {
150px;
height: 100px;
background-color: purple;
margin-right: 5px;
}
div span:nth-child(3) {
/* 只让第三个盒子下对齐 用align-self */
align-self: flex-end;
}
div span:nth-child(2) {
/* order默认是0，设置为-1 比0小 所以在前面 （左） */
order: -1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>