【融职培训】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

2

1

3

2

4

3

5

通过上面的案例，大家可以看到，默认情况下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

2

1

3

2

4

3

5

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

2

1

3

2

4

3

5

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布局完成融职教育移动端的底部菜单。

【融职教育】在工作中学习，在学习中工作