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, 发展中...)
