flex布局

Flex 是 Flexible Box的缩写, 意思是"弹性布局", 用来为盒状模型提供最大的布局灵活性。

任何一个容器都可以设置为Flex布局模式。

/* 块元素可以设置为Flex容器 */
.container {
  display: flex;
}

/*内联元素也可以设置为Flex*/
span {
  display: inline-flex;
}

/* WebKit内核浏览器,如Safari, 需要加前缀*/
div {
  display: -webkit-flex;	/*Safari*/
  display: lfex;
}

一旦设置为Flex容器, 则容器内子元素的float, clear, vertical-align属性全部失去意义, 没有效果了。

Tips: 布局演变史

1. 表格布局table

世界第一个网页诞生于1990年12月20日, 依赖HTML中的<table>标签来实现

页面随着内容的不断增加, 会变更越来越臃肿, 难以维护

2. 定位布局positon

随着页面复杂度的不断提升, 更多的属性被添加到HTML, CSS中

其中, CSS中的position属性具有革命性

使页面中的元素可以摆脱表格单元格的束缚,可以定位到窗口中的任何位置

3. 浮动布局float

浮动float技术的初衷并不是为了布局, 而是用来处理文本与图片的排版问题

因为任何元素一旦浮动就会变成块元素,从而可以设置宽高, 非常适合页面布局

所以, 网页设计师就使用float再配合<div>,<span>,几乎可以完全任何页面布局

但是元素浮动后, 为了防止对它后面的同级元素产生影响, 就必须清除浮动clear

另外, 当元素之间具有层级关系时, 子元素的浮动会导致父元素失去高度

当然浮动千万的问题远不止以上几点,所以,业界一直在寻求一种真正布局技术

4. 弹性布局flex

我们知道,浮动布局很容易实现元素水平居中, 但是垂直居中就非常的困难,实现起来很麻烦

用浮动技术来进行网页布局,是一种"无心插柳柳成萌"的结果, 算是一种巧合吧

使用Flex弹性布局, 就是针对浮动布局的所有痛点而生, 元素浮动的后遗症全部解决

所以在Flex容器中, 不能,也没必要更使用float属性,没了浮动当然也不再需要clear

Flex有自己的元素垂直对齐解决方案, 所以vertical-align属性也失效

5. 网格布局grid

不得不说, 世间万物就是一个轮回, 曾经那么令人不堪的表格布局,居然回归了

表格布局尽管有那么多的缺点,但是它的优势也非常明显,就是简单, 直观

其实就这一条, 就足以征服所以设计师,简单直观难道不是我们一直追求的目标吗?

如果有一种布局方式, 即有表格的简单直观, 又有弹性盒子的友好体贴, 那该有多好?

这个愿意现在终于实现了, 网格布局(Grid)横空出世

网格布局集美貌与智慧于一身, 同时具备了表格布局与弹性布局的所有优点

这么好的东西, 可惜很多浏览器支持情况不乐观, 移动端支持好一些

但相信, 会有越来越多的浏览器加入到网格布局的行列中, 大家现在学习正当时

Tips: 布局演变史: 表格(table) ==> 定位(position) ==> 浮动(float) ==> 弹性(flex) ==> 网格(grid, 发展中...)