Flexible Box


弹性布局(flexbox),第一次见到这种布局方式的我,有种第一次遇到外国人一样的好奇,咦~这个人长得这么特别,黄头发大鼻头深眼窝。然后,在好奇心的趋势下,我就打算一窥究竟,它的内部构造到底是和我们有什么不同的(我们不一样~)。
直到我遇到了bootsrap的库之后,我深深被它的弹性布局吸引,感觉是一个很高大上的布局方式。通过深入探索之后,我才发现它应用的布局方式就是结合flex布局和媒体查询这两大特性。因此,有必要再从头学一遍flex 这种超爽体验的布局方式了。

 

本章将由下面四部分进行展开:

  • flex布局概念
  • 主流布局种类
  • flex必要性
  • 应用场景

1.什么是flex布局


弹性布局(flexbox),它是用来为我们原有的盒模型的一种扩展,提供了一种灵性
谈到灵性,可以参考一个网站点击这里查看网页内容。它就是使用flex布局方式进行排列,并且很智能化的按照不同分辨率的大小,进行不同的排版风格的变换。

那么到底什么才是弹性布局呢?
首先,我们有两个概念来了解一下:

 

  •  
  • 容器(container)
  • item

 

要采用Flex布局的元素,必须放入在一个flex容器中。而它的所有子元素会继承改属性,成为容器的item。
.container {
  width: 500px;
  height: 500px;
  background-color: #000;
  /** 父节点flex容器 */
  display: flex;
  /** 布局方式:从left到right进行布局 */
  align-content: flex-start;
}
/** 子元素自动继承flex布局 */
.item {
  height: 100px;
  width: 100px;
  margin: 10px 10px;
  background-color: #ccc;
}

 

然后,我们再来了解一个知识点:容器的两个轴线,可以类比为x,y坐标轴。

 

  • 水平主轴(main axis)
  • 垂直交叉轴(cross axis)

主轴布局又分为:start-center-end
交叉轴布局:start-center-end

每个容器中的item默认布局都是:从主轴的起始到主轴的结尾。

2.Flex的必要性


以前我们的布局方式基本都是通过position、float以及其他css属性结合完成的。但是面对复杂页面,以及在不同分辨率下的展示效果,原有的布局就显得捉襟见肘了,就会出现一系列局部兼容性问题。

因此,flex布局就应运而生了,为我们的前端开发提供了一个很好的布局方案。

3.目前主流布局都有哪些


  • 固定式布局
  • 流式布局
  • 弹性布局
  • 浮动布局
  • 定位布局
  • 圣杯布局

1.固定式布局

即宽度,高度固定,页面被一个固定网页包裹,容器不能移动,页面的宽高不随页面的变化而变化,这种布局大家比较熟悉,这种方式一度成为页面布局的主流方式,这样布局设计简单,更容易定义,但是由于屏幕尺寸的不同,特别是移动端各个设备的不同,这种布局在灵活性方式可用度不高。
常见于官方主页,比如:人民日报官网西安交大官网等。

2.流式布局

常见于一些网络相册图片的一种布局。
项目源码

3.弹性布局

目前主流布局方式,可以结合媒体查询功能进行响应式布局。
北京大学官网 可以结合西安交大官网对比。

4.浮动布局

利用float进行布局,这是一种常见的布局方式。可以解决块级元素的并列展示问题。不过这是一种破坏文档流的布局方式,所以,现阶段的开发会尽可能不用该属性。
常见于导航条布局方式。

5.定位布局

我以前最长用的一种布局方式,结合4.浮动布局进行网站开发。
主要利用position属性进行定位布局。

6.圣杯布局

这也是一种常见的布局方式。
项目源码

4.Flex的应用场景


最主流的一种应用就是响应式布局,详见北大、清华官网。
悬挂式布局
流式布局
圣杯布局

具体实现方法会在后面讲到。谢谢观看。

 
 
学完还行练?点这里