flex布局
l Flex布局/弹性布局：
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题
父元素添加 display: flex，子元素可以自动的挤压或拉伸
修改主轴对齐方式属性: justify-content
传统布局与flex布局
传统布局
兼容性好
布局繁琐
局限性，不能在移动端很好的布局
flex弹性布局
操作方便，布局极为简单，移动端应用很广泛
PC端浏览器支持情况差
ie11或更低版本，不支持或仅部分支持
建议：如果是pc端，我们还是用传统布局，如果是移动端或者不考虑兼容性问题的PC端页面布局，我们可以使用flex布局。
flex布局原理
原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
flex意为弹性布局，任何一个容器都可以指定为flex布局
当我们为父元素设为flex布局后，子元素的float ，clear，vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=flex布局
采用flex布局的元素，称为flex容器，他的所有子元素自动成为容器成员。
flex布局父项常见属性
flex-direction：设置主轴的方向
默认主轴方向就是x轴方向，水平向右
默认测轴方向就是y轴方向，水平向下
主轴，侧轴可以互换的。
属性值： row：默认从左到右
row-reverse：从右到左
column：从上倒下
column-reverse：从下到上
justify-content:设置主轴上的子元素排列方式
设置主轴上的子元素对齐方式
center：在主轴上居中对齐（如果主轴是x轴，水平居中）
space-around:平分剩余空间
space-between:先两边贴边，再平分剩余空间
flex-start：从头部开始，从左到右
flex-wrap：设置子元素是否换行
flex布局中默认是不换行的，
nowrap：不换行
wrap：换行
align-content：设置测轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且知恩感用于子项出现换行的情况，在单行下是没有效果的。 align-item:设置测轴上的子元素排列方式（单行）
stretch：拉伸（默认值）
center：垂直居中
flex-start：从上倒下
flex-end：从下到上
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
flex布局子项常见属性 flex子项目占的份数 flex属性定义子项目分配剩余空间，用flex来表示占多少份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序
01-体验flex布局与float的异同
<!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>
body {
height: 3000px;
}
.float {
border: 10px solid tomato;
overflow: hidden;
}
.float div {
float: left;
width: 200px;
height: 200px;
background-color: #0a0;
border: 10px solid #ff0;
font-size: 60px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 200px;
}
.flex {
display: flex;
justify-content: space-between;
border: 10px solid pink;
}
.flex div {
width: 200px;
height: 200px;
background-color: #0a0;
border: 10px solid #6cf;
font-size: 60px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<h2>float</h2>
<div class="float">
<div>1</div>
<div style="margin-left: 400px">2</div>
<div style="float: right">3</div>
</div>
<br />
<h2>flex</h2>
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
02-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>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box span {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
a {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
03-主轴对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>主轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1000px;
height: 600px;
background: orange;
}
.box span {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
04-侧轴对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>侧轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 1000px;
height: 600px;
background: orange;
}
.box span {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span style="align-self: flex-start">航哥哥</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
05-伸缩比
<!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>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box span {
width: 200px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<span>李狗蛋</span>
<span style="flex: 1">张三</span>
<span>张翠花</span>
</div>
</body>
</html>
06-水平垂直居中
<!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>
.box {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
background: #6cf;
}
.son {
width: 120px;
height: 120px;
background-color: #0a0;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
移动端特点
l PC端网页和移动端网页的有什么不同？
Ø PC屏幕大，网页固定版心
Ø 手机屏幕小， 网页宽度多数为100%
布局视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>看看我</div>
</body>
</html>
理想视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>看看我</div>
</body>
</html>
