学习内容：
例如：
- 体验flex布局
- flex布局父项常见属性
- justify-content属性
- flex-wrap属性
- align-items属性
- align-content属性
- flex-flow属性
- 常见子项属性
- align-self和order属性
学习产出：
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>Flex布局</title>
<style>
/*
传统布局：
兼容性好
布局繁琐
局限性，不能在移动端很好的布局
flex弹性布局
操作方便，布局极为简单，移动端应用很广泛
PC端浏览器支持情况较差
IE 11或更低版本，不支持或仅部分支持、
flex布局原理
flex是flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以制定为flex布局
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
伸缩布局=伸缩盒布局=弹性布局=弹性盒布局=flex布局
布局原理
采用Flex布局的元素，称为Flex容器(flex container),简称“容器”。
它的所有子元素自动成为容器成员，称为Flex项目(flex item),称为“项目”。
体验中div就是flex父容器
体验中span就是子容器flex项目
子容器可以横向排列也可以纵向排列
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
*/
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: aquamarine;
margin-right: 5px;
flex: 1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>2.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>flex布局父项常见属性</title>
<!-- 黑盒测试 白盒测试 三次握手 四次挥手 -->
<!--
常见父项属性
以下6个属性是对父元素设置的：
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
flex-direction设置主轴的方向：
1.主轴和侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，垂直向下
2.属性值
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。我们的子元素
就是跟着主轴来排列的
属性值 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
-->
<style>
div{
width: 800px;
height: 300px;
background-color: palevioletred;
/* 给父级添加flex属性 */
display: flex;
/* 默认的主轴是x轴 行row 那么y轴就是侧轴 */
/* 我们的元素是跟着主轴来排列的 */
/* flex-direction: row; */
/* 简单了解 翻转 */
/* flex-direction: row-reverse; */
/* 我们可以把我们的主轴设置为y轴 那么x轴就成了侧轴 */
/* flex-direction: column; */
/* 翻转 */
flex-direction: column-reverse;
}
span{
width: 150px;
height: 100px;
margin-right: 20px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>3.justify-content属性
<!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>justify-content属性</title>
<!--
justify-content设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前要确定好主轴是哪个
flex-start 默认值从头部开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴则 水平居中)
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间(重要)
-->
<style>
.box1{
display: flex;
width: 800px;
height: 300px;
margin-bottom: 20px;
background-color: pink;
/* 默认的主轴是x轴 row */
flex-direction: row;
/* justify-content: 是设置主轴上子元素的排列方式 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* 让子元素居中对齐 */
/* justify-content: center; */
/* 平分剩余空间 */
/* justify-content: space-around; */
/* 先两边贴边，再分配剩余的空间 */
justify-content: space-between;
}
.box1 span{
width: 150px;
height: 100px;
background-color:paleturquoise;
}
.box2{
display: flex;
width: 800px;
height: 400px;
background-color: palegreen;
flex-direction: column;
/* justify-content: center; */
justify-content: space-between;
}
.box2 span{
width: 150px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="box1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="box2">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>4.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>flex-wrap属性</title>
<!--
flex-wrap设置子元素是否换行
默认情况下，项目都排在一条线(又称“轴线”)上，flex-wrap属性定义，flex布局中默认是不换行的。
nowrap 默认值，不换行
wrap 换行
-->
<style>
div{
display: flex;
width: 600px;
height: 400px;
background-color: aquamarine;
/* flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面 */
/* flex-wrap: nowrap; */
flex-wrap: wrap;
}
div span{
width: 150px;
height: 100px;
background-color: palevioletred;
color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>3</span>
<span>3</span>
</div>
</body>
</html>5.align-items属性
<!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>align-items属性</title>
<!--
align-items设置侧轴上的子元素排列方式(单行)
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项的时候使用
flex-start 默认值 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸
-->
<style>
div {
display: flex;
height: 400px;
width: 800px;
background-color: pink;
/* 默认的主轴是x轴 row */
flex-direction: column;
justify-content: center;
/* 侧轴居中 */
/* align-items: center; */
/* align-items: flex-start; */
/* 拉伸 但是子盒子不要给高度 */
/* align-items: stretch; */
align-content: center;
}
div span{
width: 150px;
height: 100px;
background-color: aqua;
color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>6.align-content属性
<!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>align-content属性</title>
<!--
align-content设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度
-->
<style>
div{
display: flex;
width: 800px;
height: 400px;
background-color: pink;
/* 换行 */
flex-wrap: wrap;
/* 因为有了换行，侧轴上控制子元素的对齐方式用align-content */
/* align-content:flex-start; */
/* align-content: center; */
/* align-content: space-around; */
/* align-content: space-between; */
align-items: flex-end;
}
div span{
width: 150px;
height: 100px;
background-color: aquamarine;
color: #fff;
margin: 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>7.flex-flow复合属性
<!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>flex-flow属性</title>
<!--
flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow:row wrap;
flex-flow:wrap row;
-->
<style>
div{
display: flex;
/* flex-direction: column;
flex-wrap: wrap; */
/* 把 */
flex-flow: wrap column;
width: 600px;
height: 300px;
background-color: palevioletred;
}
div span{
width: 150px;
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>8.常见子项属性
<!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>flex布局常见子项属性</title>
<!--
淘宝圣杯布局
flex布局子项常见属性
flex子项目占的份数
align-self绘制子项目自己在侧轴的排列方式
order属性定义子项的排列顺序(前后顺序)
-->
<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(3){
width: 100px;
height: 150px;
background-color: yellow;
}
section div:nth-child(2){
flex: 1;
}
.box1{
display: flex;
width: 600px;
height: 200px;
background-color: cadetblue;
margin: 0 auto;
}
.box1 div{
flex: 1;
background-color: rosybrown;
}
.box1 div:nth-child(1){
flex: 2;
background-color: mediumaquamarine;
}
p{
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span{
flex: 1;
}
p span:nth-child(2){
flex: 2;
background-color: cadetblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<!-- <div class="box1">
<div class="boxchild1">1</div>
<div class="boxchild2">2</div>
<div class="boxchild3">3</div>
<div class="boxchild4">4</div>
<div class="boxchild5">5</div>
</div> -->
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>9.align-self和order属性
<!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>align-self和order属性</title>
<!--
align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，
默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0
注意：和z-index不一样
-->
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 让三个盒子沿着侧轴底侧对齐 */
/* align-items: flex-end; */
/* 只让3号盒子下来底侧 */
}
div span{
width: 150px;
height: 100px;
background-color: cadetblue;
margin-right: 5px;
}
div span:nth-child(3){
align-self: flex-end;
}
div span:nth-child(3){
order: -1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
