Web前端学习 第2章 网页重构15 flex布局
原创
一、flex布局概述
此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，本节我们一起学习弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。
本节会针对flex布局的常用属性，讲解如何将flex布局应用到实际项目中。
二、flex容器
将一个元素设置如下属性
1 .box{
2 display: flex;
3 }此容器会变成一个flex容器（flex container），容器内部的元素被称为flex项目（flex item），在这个容器内部浮动会失效，通过设置flex容器的css样式，可以改变内部项目的布局方式。
我们先来了解一些flex布局的基本概念
一个flex容器默认存在两个轴，横向的主轴（main轴）和纵向的交叉轴（cross轴）。默认情况下flex项目按照main轴排列，通过设置，可以让项目按照cross轴排列，示例代码如下所示：
1 <div class="container">
2 <div class="box">1</div>
3 <div class="box">2</div>
4 <div class="box">3</div>
5 </div>通过上面的案例，大家可以看到，默认情况下flex容器内部的元素是按照主轴排列的，并且块元素不会独立成行。
flex-direction
通过flex-direction属性，可以设置flex容器按主轴或是交叉轴排列。
- flex-direction:row;默认值，项目按主轴排列，高度为容器高度。
- flex-direction:column;项目按交叉轴排列，长度为容器长度。
示例代码如下所示：
1 .container{
2 display: flex;
3 /* flex-direction: column; */
4 flex-direction: row;
5 border:1px solid #00f;
6 height:200px;
7 }
8 .box{
9 border:1px solid red;
10 }这里大家可以直观地看到，让flex项目按照主轴排列，此功能可以完全取代浮动布局，而且不必考虑浮动元素脱离文档流的种种弊端。如果不考虑浏览器兼容问题，那么flex布局大部分情况都可以很好地替代浮动布局。
justify-content
justify-content属性可以控制flex项目在容器中的水平排列方式，示例代码如下所示
1 .container{
2 display: flex;
3 border:1px solid #00f;
4 height:200px;
5 /* flex项目按水平排列 */
6 justify-content:center;
7 }- justify-content:flex-start;flex项目在主轴开始位置展示
- justify-content:flex-end;flex项目在主轴结束位置展示
- justify-content:flex-center;flex项目在主轴居中展示
此前我们将一个元素居中显示，通常将设置元素设置为固定宽度，然后为其设置属性margin：0 auto;对于宽度不固定的元素，我们只能使用一些奇淫技巧让其居中。
现在有了flex布局，我们可以很轻易的让一个或多个不定宽度的元素居中。
align-items
align-items属性可以控制flex项目在容器中的垂直排列方式，示例代码如下所示
1 .container{
2 display: flex;
3 border:1px solid #00f;
4 height:200px;
5 justify-content: center;
6 align-items: center;
7 }
8 .box{
9 border:1px solid #f00;
10 height:50px;
11 }- align-items:flex-start;flex项目在交叉轴开始位置展示
- align-items:flex-end;flex项目在交叉轴结束位置展示
- align-items:flex-center;flex项目在交叉轴居中展示
三、flex项目
align-self
1 <div class="container">
2 <div class="box">1</div>
3 <div class="box item">2</div>
4 <div class="box">3</div>
5 </div> 1 .container{
2 display: flex;
3 border:1px solid #00f;
4 height:200px;
5 justify-content: center;
6 align-items: center;
7 }
8 .box{
9 border:1px solid #f00;
10 height:50px;
11 }
12 .item{
13 align-self: flex-start;
14 }flex
1 <div class="container">
2 <div class="box item1">1</div>
3 <div class="box item2">2</div>
4 <div class="box item3">3</div>
5 </div> 1 .container{
2 display: flex;
3 border:1px solid #00f;
4 height:200px;
5 justify-content: center;
6 align-items: center;
7 }
8 .box{
9 border:1px solid #f00;
10 height:50px;
11 }
12 .item1{
13 flex:1;
14 }
15 .item2{
16 flex:2;
17 }
18 .item3{
19 flex:3;
20 }四、课后练习
- 使用flex布局让一个宽高都为100px的div垂直水平居中。
- 使用flex布局完成融职教育首页顶部菜单。
- 使用flex布局完成融职教育移动端的底部菜单。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。