摘要：如何使用首先梳理一下，将属性分为两类作用在容器元素上的有个，其实容器元素上还有一个设置的属性作用在子元素上的有个当时设置布局之后，子元素的的属性将会失效。
why——为什么使用flex
长久以来，网页布局是一个比较难搞的地方，各种前端前辈呕心沥血总结了各种奇淫巧技，比如利用float和position来实现居中、两栏、三栏等等布局。然而css并不存在一个官方的布局方案，终于一种新的布局方案就出现了。
what——什么是flexflex即是弹性盒子布局，既然有弹性那么就说明它是可以达到自适应的目的的。
根据我的理解，flex布局主要有两部分需要注意，采用flex布局的元素叫做flex容器元素，flex容器元素内部的元素叫做子元素。flex布局的所有属性也可以分为两类，一部分是作用在容器元素，一部分作用在子元素。
借用一张MDN的图，首先flex布局是二维的，就像平面直角坐标系一样会有X轴和Y轴，所以如图设置了display:flex的容器元素默认有横向的主轴（main axis）和纵向的交叉轴（cross axis），当然了也可以设置为主轴为纵向交叉轴为横向。
和主轴和交叉轴相关的还有main size和cross size，main size即是单个子元素占主轴的空间，cross size即是单个子元素占交叉轴的空间。
首先梳理一下，将属性分为两类：
作用在容器元素上的有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生成一个行级的容器元素
flex-direction: row | row-reverse | column | column-reverse
设置主轴的方向，会影响子元素在主轴的排列方向，默认是row
flex-wrap: nowrap | wrap | wrap-reverse
主轴尺寸固定时，子元素排列不下时，是否要换行
flex-flow: flex-direction 和 flex-wrap 的简写形式（没什么好说的
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
决定了子元素在主轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch
决定了子元素在交叉轴上如何对齐
align-content：flex-start | flex-end | center | space-between | space-around | stretch
定义的是多艮轴线的对其方式，当子元素只有一根轴线时，这个属性不起作用
以默认主轴为例，如果子元素太多产生换行，此时子元素就有多个轴线，align-items设置的就是这多根轴线的对其方式，具体表现和justify-content、align-items一样
place-content：是align-content和justify-content的缩写
子元素属性order：子元素在容器元素中排列的顺序，数值越小排列越靠前，默认为0，可以取负值
align-self：auto | flex-start | flex-end | center | baseline | stretch
单个子元素在交叉轴上的对其方式，取值和表现方式与align-items一样，但是只作用于单个子元素
flex-basis：auto |
flex-shrink：
flex-grow：
这三个属性放在一起说，
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115928.html
摘要：本文从属于某熊周刊一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章项目书籍教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更新。资讯来源包括但不限于。另外，周刊中的技术知识框架图参照笔者的我的编程知识体系结构。 本文从属于某熊周刊:一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章/项目/书籍/教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更...
摘要：下面我们从前端基础和底层原理开始讲起。对于和这三个对应于矢量图位图和图的渲染来说，给前端开发带来了重武器，很多小游戏也因此蓬勃发展。这篇文章受众之大，后来被人重新整理并发布为，其中还包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 这...
摘要：下面我们从前端基础和底层原理开始讲起。对于和这三个对应于矢量图位图和图的渲染来说，给前端开发带来了重武器，很多小游戏也因此蓬勃发展。这篇文章受众之大，后来被人重新整理并发布为，其中还包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 这...
摘要：共字，读完需分钟。下面提出一种可以帮你写出高可读的实践方法，这个方法并非原创，最早的实践来自于这篇文章。本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。 showImg(https://segmentfault.com/img/remote/1460000009341335?w=1240&h=403); 共 1926 字，读完需 4 分钟。所有工程师都知道，代码是编写...
摘要：七月初推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。七月不在山，不在岸，采我之时七月半。七月银潢七月秋浪高，黄昏欲渡未成桥。至今王子乔唐宋之问王子乔，爱神仙，七月七日上宾天。吸日精，长不归，遗庙今在而人非。 七月初 vue2 推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。...
阅读 2194·2023-04-25 15:15
阅读 1106·2021-11-25 09:43
阅读 1439·2021-11-23 09:51
阅读 896·2021-11-12 10:36
阅读 2739·2021-11-11 16:55
阅读 755·2021-11-08 13:18
阅读 471·2021-10-28 09:31
阅读 3208·2021-10-11 10:58
