flex布局详解
1. 了解flex布局
1.1 任何一个容器都可以指定为flex布局。（div、span …）
1.2 当我们为父盒子设置为flex布局后，子元素的float、clear和vertical-align属性会失效
1.3 flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2. 接下来通过案例和截图的方式对flex布局进行详细的讲解！
2.1 基础代码：设置一个父盒子div和三个子盒子span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局详解</title>
<style>
div{
width: 800px;
height: 300px;
background-color: #ebce6b;
}
span{
width: 150px;
height: 100px;
background-color: #ff64a6;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
2.1 代码的html页面展示为：
2.2 在基础代码之上为父元素添加flex属性：display: flex;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局详解</title>
<style>
div{
/*---------修改部分开始------------*/
/*在父元素中添加flex属性*/
display: flex;
/*---------修改部分结束------------*/
width: 800px;
height: 300px;
background-color: #ebce6b;
}
span{
width: 150px;
height: 100px;
background-color: #ff64a6;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
2.2 代码的html页面展示为：
2.3 在父元素中添加flex-direction属性：设置主轴的方向
flex-direction的属性值有四个：row,row-reverse,column,column-reverse。
2.3.1 flex-direction: row是默认的属性值，即从左到右排列；
2.3.2 flex-direction: row-reverse是从左到右排列；
2.3.3 flex-direction: column是从上到下排列；
2.3.4 flex-direction: column-reverse是从下到上排列；
2.4 在父元素中添加justify-content属性：设置主轴上的子元素排列方式
justify-content的属性值有五个：flex-start,flex-end,center,space-around,space-between。
2.4.1 justify-content: flex-start;：是默认的属性值，从头部开始排列，如果主轴是x轴，则从左到右排列
2.4.2 justify-content: flex-end;：从尾部开始排列
2.4.3 justify-content: center;：在主轴居中对齐（如果主轴是x轴则水平居中）
2.4.4 justify-content: space-around;：平分剩余空间
2.4.5 justify-content: space-between;：先两边贴边，再平分剩余空间（重要！！！）
2.5 在父元素中添加flex-wrap属性：设置子元素是否换行
默认情况下，子元素都排在一条线（又称’轴线’）上，如果放不下，就会缩小子元素的宽高，装入父元素中
2.5.1 flex-wrap: nowrap;：不换行（默认值）
2.5.2 flex-wrap: wrap;：换行
2.6 在父元素中添加align-items属性：设置侧轴上的子元素排列方式（只能设置单行！）
2.6.1 align-items: flex-start;：从上到下（默认值）
2.6.2 align-items: flex-end;：从下到上
2.6.3 align-items: center;：垂直居中
2.6.4 align-items: stretch;：拉伸（使用这个属性时，不能给子元素设置高度）
2.7 在父元素中添加align-content属性：置侧轴上的子元素排列方式（只能设置多行！）
2.7.1 align-content: flex-start;：在侧轴的头部开始排列（默认值）
2.7.2 align-content: flex-end;：在侧轴的尾部开始排列
2.7.3 align-content: center;：整体子元素在侧轴中间显示
2.7.4 align-content: space-around;：子项在侧轴平分剩余空间
2.7.5 align-content: space-between;：子项在侧轴先分布在两头，再平分剩余空间
2.7.6 align-content: stretch;：设置子项元素高度平分父元素高度（使用这个属性时，不能给子元素设置高度）
2.8 在子元素中添加flex属性：定义子元素分配父元素的剩余空间，用flex来表示占比多少份数
flex: 1;：不设置子元素的宽度，让三个子元素平均分配父元素的剩余空间，这里剩余空间就是父元素的宽度，每个子元素占1份，最终效果即为平均分配
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
