哎呦喂web 前端三日老师 《精通Flex布局》

哎呦喂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