flex布局介绍
- 传统布局: 基于浮动(float)与定位(position)
- flex弹性布局: 灵活,强大,简单,直观
- flex布局没有方向性
- flex布局空间自由分配, 自动对齐
flex仅适用于简单的线性布局
flex功能预览
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 500px;border: 1px sienna solid;/*如果这个容器的内容要使用FLex布局，第一步需要将此容器转换为弹性盒布局*/display: flex;}/*一旦将父元素转换为弹性盒布局，里面的子元素自动成为 弹性项目 必须是子元素。孙元素不行不管这个项目标签之前是什么类型，都转换为行内块可以设置宽度和高度*/.container>.item {flex: auto;height: 50px;}</style></head><body><div class="container"><div class="item">1</div><a class="item">2</a><span class="item">3</span><div class="item">4</div></div></body></html>
页面效果如下：
flex换行显示
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 300px;display: flex;}.container>.item {/* width: 50px;*//*会剩余50像素的剩余空间*/width: 120px;/*内容会被缩放*/}/*换行显示*/.container {flex-wrap: wrap;/*默认是nowrap 不换行*/}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body></html>
flex单行容器项目的对齐方式
项目位于容器的开头
justify-content: flex-start;/*默认值，项目位于容器的开头。剩余空间在最右侧*/
项目位于容器的结尾
justify-content: flex-end;/*项目位于容器的结尾，剩余空间在最左侧*/
项目位于容器的中心
justify-content: center;/*项目位于容器的中心。剩余空间平均分配在两侧*/
两端对齐
justify-content: space-between;/*两端对齐，剩余空间在除了首尾项目之外的所有项目之间分配*/
分散对齐
justify-content: space-around;/*分散对齐,剩余空间在每个项目两侧分配*/
平均分配
justify-content: space-evenly;/*平均分配，每个项目之间的剩余空间是相等的*/
多行容器中的项目对齐方式
项目在开始
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Flex弹性盒布局多行容器中的项目对齐方式</title><style>.container {width: 300px;display: flex;flex-wrap: wrap;height: 150px;/*align-content 为多行容器设置项目对齐方式*/align-content: stretch;/* 默认值 */}.container>.item {width: 60px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div></div></body></html>
项目在开始
/*1.容器剩余空间在项目两边如何分配，将所有项目视为一个整体*/align-content: flex-start;/*项目在开始*/
项目在结尾
align-content: flex-end;/*项目在结尾*/
项目在中间
align-content: center;
两端对齐
justify-content: space-between;/*两端对齐，剩余空间在除了首尾项目之外的所有项目之间分配*/
分散对齐
align-content: space-around;
平均分配
align-content: space-evenly;
项目在交叉轴上的排列
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>项目在交叉轴上的排列</title><style>.container {width: 300px;height: 150px;display: flex;/*项目在交叉轴上默认是拉伸的*/align-items: stretch; /*默认值*/}.container>.item {width: 60px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>
项目在开始
align-items: flex-start;
项目在结尾
align-items: flex-end;
align-items: center;
主轴与项目排列方向的简写
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>项目在交叉轴上的排列</title><style>.container {width: 300px;height: 150px;display: flex;/*默认是row nowrap*/flex-flow: column nowrap;}.container > .item {width: 60px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body></html>
主轴在垂直方向的项目排列
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>主轴在垂直方向的项目排列</title><style>.container {width: 300px;height: 150px;display: flex;flex-direction: column; /*默认是row*/}.container > .item {}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>
总结
Flex布局相对于浮动和定位，难以理解。要多实践多思考，才能掌握于心。加油！