# Flex 布局是什么? [TOC] ## Flex 简介 * Flex 是 **Flexible Box**的缩写, 意思是"**弹性布局**", 用来为盒状模型提供最大的布局灵活性 * 任何一个容器都可以设置为`Flex`布局模式 ```css /* 块元素可以设置为Flex容器 */ .container { display: flex; } /*内联元素也可以设置为Flex*/ span { display: inline-flex; } /* WebKit内核浏览器,如Safari, 需要加前缀*/ div { display: -webkit-flex; /*Safari*/ display: lfex; } ``` * 一旦设置为Flex容器, 则容器内子元素的`float`, `clear`, `vertical-align`属性全部失去意义, 没有效果了 * 由此可见, **Flex布局**的目标明确, 就是要把**Float布局**拍死在沙滩上 ## 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, 发展中...)