【前端工程师手册】关于flexbox的why、what和how

时间 2019-11-06

原文原文链接

why——为何使用flex

长久以来，网页布局是一个比较难搞的地方，各类前端前辈呕心沥血总结了各类奇淫巧技，好比利用float和position来实现居中、两栏、三栏等等布局。然而css并不存在一个官方的布局方案，终于一种新的布局方案就出现了。css

what——什么是flex

flex便是弹性盒子布局，既然有弹性那么就说明它是能够达到自适应的目的的。
根据个人理解，flex布局主要有两部分须要注意，采用flex布局的元素叫作flex容器元素，flex容器元素内部的元素叫作子元素。flex布局的全部属性也能够分为两类，一部分是做用在容器元素，一部分做用在子元素。
前端

借用一张MDN的图，首先flex布局是二维的，就像平面直角坐标系同样会有X轴和Y轴，因此如图设置了display:flex的容器元素默认有横向的主轴（main axis）和纵向的交叉轴（cross axis），固然了也能够设置为主轴为纵向交叉轴为横向。
和主轴和交叉轴相关的还有main size和cross size，main size便是单个子元素占主轴的空间，cross size便是单个子元素占交叉轴的空间。web

how——如何使用flex

首先梳理一下，将属性分为两类：
做用在容器元素上的有7个：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、place-content，其实容器元素上还有一个设置display:flex/inline-flex的属性
做用在子元素上的有6个：align-self、order、flex-grow、flex-shrink、flex-basis、flex
ps：当时设置 flex 布局以后，子元素的 float、clear、vertical-align 的属性将会失效。浏览器

容器元素属性

display: flex | inline-flex
设置flex生成一个块级的容器元素；inline-flex生成一个行级的容器元素
app

flex-direction: row | row-reverse | column | column-reverse
设置主轴的方向，会影响子元素在主轴的排列方向，默认是row
框架

flex-wrap: nowrap | wrap | wrap-reverse
主轴尺寸固定时，子元素排列不下时，是否要换行
布局

flex-flow: flex-direction 和 flex-wrap 的简写形式（没什么好说的flex

align-items: flex-start | flex-end | center | baseline | stretch
决定了子元素在交叉轴上如何对齐

spa

place-content：是align-content和justify-content的缩写

子元素属性

order：子元素在容器元素中排列的顺序，数值越小排列越靠前，默认为0，能够取负值

flex-basis：auto | <length>
flex-shrink：<number>
flex-grow：<number>
这三个属性放在一块儿说，
flex-grow定义了容器元素有剩余空间时，子元素是否会放大以及如何放大，默认为0即不放大；若是全部子元素的flex-grow都是1，则在剩余空间中，全部子元素都取一份来放大；若是某子元素的flex-grow是2，则此子元素在剩余框架中取2份来放大。
flex-shrink定义了容器元素空间不足时，子元素是否会缩小以及如何缩小，默认为1即会缩小；若是全部子元素的flex-shrink都是0，则空间不够时不缩小；若是全部子元素的flex-shrink都是1，则空间不足时，全部子元素缩小相同的比例；若是某子元素的flex-shrink是2，则该子元素缩小的比例是其余子元素的2倍。
flex-basis定义了在分配多余空间以前，子元素占据的主轴空间，浏览器会根据这个来计算剩余空间，也就是说设置了flex-basis的子元素会覆盖掉原来设置的尺寸大小；默认值为auto，即子元素本来的大小。

flex：flex-grow, flex-shrink 和 flex-basis的简写

参考资料：
MDN
知乎专栏-30分钟学会flex