此前我们制作的所有网页都是基于盒子模型和浮动布局完成的,本节我们一起学习弹性布局(或者叫弹性盒子布局),这是一种更先进的布局方式,可以让网页布局更简洁,更易于维护。
本节会针对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容器按主轴或是交叉轴排列。
示例代码如下所示:
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属性可以控制flex项目在容器中的水平排列方式,示例代码如下所示
1 .container{
2 display: flex;
3 border:1px solid #00f;
4 height:200px;
5 /* flex项目按水平排列 */
6 justify-content:center;
7 }
此前我们将一个元素居中显示,通常将设置元素设置为固定宽度,然后为其设置属性margin:0 auto;对于宽度不固定的元素,我们只能使用一些奇淫技巧让其居中。
现在有了flex布局,我们可以很轻易的让一个或多个不定宽度的元素居中。
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 }
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 }
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 }
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。