哎呦喂web 前端三日老师
《精通Flex布局》 flex属性总结(全) - 是船长啊 - 博客园 面试问题整理之flex 布局 思维导图
发布时间： 估计2019年 集数：11集 观看:youku
第一课 flex-direction
关键点，设置容器的 display:flex 布局方式为flex，然后其它子元素都继承它
属性1： flex-direction 作用：最基本的属性，用于控制元素的排列方式，常用的值：row， row-reverse，column
第二课 flex-wrap
控制元素换行的属性，默认值是什么？
flex-wrap: nowrap; //不换行; wrap //换行有注意点，就是每一行的高度占据容器除以行数的高度（待实践）； wrap-reverse//从下面开始排列
第三课 flex-flow
它是flex-direction和flex-wrap集合的写法
flex-flow:row nowrap
第四课 justify-content
作用于控制主轴（水平方向）上 Flex 子项的对齐方式，有3个常用值：flex-start（默认值），flex-end 表示与行的结束位置对齐，center 表示与行中间对齐； space-around：水平空白平分；space-between 和space-around区别待研究
其它： justify-items 属于对齐框 | Box Alignment => 对齐项目 | justify-items 参考腾讯云CSS 在线API
第五课 align-items
有5常用属性值(参考 justify-content)，控制元素在垂直方向上的对齐方式。 strecth//拉伸； baseline；
第六课 align-content
控制“多”行排列的效果，也是控制元素在纵上排列的属性。例
flex-flow:row wrap; align-content:flex-start; 需要知道的是这个属性是控制多行的纵向排列方式；
align-content:space-around：纵向空白平分； space-between
二.子元素上属性 (6个)
第七课 order
之前课的属性都是设置在“主容器”上的
单个标签使得它的排列顺序发生改变。 order : 3;
第八课 flex-grow
控制标签放大倍数， flex-grow:2;
第九课 flex-shrink
flex-shrink:0;//表示不允许元素缩小
第十课 flex-basis
每个元素宽度的设置，作用和width类似， 常用有数字值，百分比值
flex flex:1 详解 (flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选)
flex: 1; 这个CSS设置很实用,可以起到控制子元素抢占容器的作用，实例参考： flex实战之移动页面确定按钮置底布局 里“确定”按钮就用了这个核心CSS设置。
至于为什么有这个效果, 看了《flex:1详解》之后,自己再实践了一下,算是理解了。不过那篇文章，作者应该算是懂 flex的，但读起来不舒服，如果有些句子再加下主语，描述再精确些，就完美了。
第十一课 align-self
单个标签在纵向上进行排列效果。 (本系列最后一课)
《Flex手机布局实战》
小程序 flex 布局快速入门 (慕课网) Flex 布局教程：阮一峰 链接1 链接2