果冻公开课第十课：打破传统布局方式的flex（下）
其实传统布局方式和人类书写是类似的
“从上到下，从左到右，写不下就换行”
但经过这些年的发展
我们发现这样的方式虽然很好理解但不够灵活
于是...
动画视频：
文字解析：
其实传统布局方式和人类书写是类似的
“从上到下，从左到右，写不下就换行”
但经过这些年的发展
我们发现这样的方式虽然很好理解但不够灵活
所以有没有办法让布局既可以从下到上
又可以从右到左呢
答案是有人引入了轴的概念
2维的物体可以有两条相互垂直的轴
让布局的方向沿着主轴依次排列
如果要换行则沿着交叉轴的方向换行
用flex-direction修改主轴方向
可以有4种
row row-reverse column和column-reverse
再用flex-wrap修改交叉轴方向
每种主轴可以对应2种方向
wrap, wrap-reverse
这样主轴和交叉轴的排列组合有4*2=8种
对于经常写文档的朋友来说
就好像这几个按钮
左中右对齐 两端对齐 分散对齐
应用在布局上也希望能实现这些对齐方式
设置还要更多
用justify-content属性来控制
flex-start flex-end center space-between space-around
分别对应了左右中对齐
两端对齐和分散对齐
以及间距相等
假设给每一行设置不同的justify-content属性值
里面有三个子元素ABC
看起来将是这样的
如果这个缩小整个盒子的宽度
那么它们则会这样在盒子里弹性伸缩
你还记得flex轴线有一条主轴和一条交叉轴相互垂直吗
justify-content指明了元素 在主轴上的对齐方式
有人可能会猜测交叉轴上应该也有属性可以修改元素的对齐方式
事实上确实如此
当交叉轴上只有一行元素时
可以使用align-items来控 制它们的对齐方式
如果是多行元素
想要控制多行元素相对于容器的对齐
则可以用align-content来 控制它们的对齐方式
当然还能把它们结合起来使用
既让子元素整体在容器的交叉轴上居中
又让子元素在它所在行的交叉轴上居中
容器上的属性已经把布局完成得差不多了
但还有一些细节需要具体到每一个flex子元素上
其中最重要的一点是子元素的宽度
如何让屏幕宽度高度变化时
子元素最终展示的效果既不会超出屏幕有能正好撑满主轴
这一要求在传统布局中其实是蛮难实现的
可能要配合一些JS代码来对屏幕的变化做侦测
做起来很复杂
所以我们希望有一种更简单的方式来设置元素的宽度和伸缩度
flex中的宽度写法是flex-basis
伸缩是flex-grow和flex-shrink
其中flex-grow是伸展
flex-shrink是收缩
flex-basis和传统width是有所不同的
它用于计算元素的初始宽度
也就是还没考虑伸缩之前的宽度
flex-basis为auto时 初始宽度为元素内容大小或者设置的宽度
值
flex-basis为像素值时 初始宽度为flex-basis的值
flex-basis为百分比时 初始宽度为占父容器的比例
flex-basis为0或0%时 初始宽度为0
当它和width同时存在时
优先级是大于width的
但最后计算的尺寸依然会受限于min-width或是max-width
比如 元素A的初始宽度设为100px
但是它有个CSS属性min-width: 200px
那么最后虽然初始宽度有flex-basis决定
但展示宽度仍然为200px
有了初始宽度后
flex-grow和flex-shrink的值会对元素造成什么影响呢
flex-grow属性中的grow是扩展的意思
所扩展的就是flex子元素所占据的宽度
扩展所侵占的空间就是元素外剩余的空白间隙
假设所有的剩余空间总量是1
我们就用flex-grow等于0-1来表示扩展的比例
比如flex容器里有3个子元素
现在给第2个子元素设置flex-grow属性值
当它为0时不会有任何扩展看起来是这样
当它改为0.5时 扩展的宽度是总剩余宽度的0.5也就是一般
当它变为1时 所有空间都使用完。
flex-shrink属性中的shrink是收缩的意思
也就是当flex容器空间不足的时候
单个元素的收缩比例
它的值也只能是0-1的数字
0表示不收缩 1表示完全收缩
这样说起来也许有点抽象不如举个例子
这个flex容器中有3个子元素
它们三个的初始宽度加起来大于父容器宽度会出现横向滚动条
如果给3个元素都设置flex-shrink：1
这3个子元素将1:1:1收缩
如果第2个子元素单独设置flex-shrink：0
则它不会收缩 剩下2个元素等比收缩。如果第2个子元素单独设置flex-shrink：2
这3个子元素完全收缩尺寸比例分配为1:2:1
其中第2个子元素收缩的宽度最大
是其他元素的2倍
所以还是很好理解的吧
需要注意的是宽度的三个属性是可以简写成一个的
也就是flex
它的值分别对应flex-grow
flex-shrink和flex-basis
默认值是0 1 auto
其中后两个是可选属性
在理解了flex主要的概念后
再来看两个例子
一：水平和垂直方向同时居中
二：三行三列布局
我们基于这一段html代码
让main元素的body元素中居中
先给父元素body设置display: flex意味着开始使用flex布局
再对容器设置主轴和交叉轴的居中对齐
也就是justify-content: center和align-items: center
这样无论main元素是否定宽高
它都会完美居中在body这个容器当中
三行三列布局
我们基于这一段html代码
由于flex的布局方向也就是主轴的方向
默认是从左到右
这里通过flex-direction属性改变为从上到下
效果就是这样的
第二步 实现从左到右的布局
container既是body的子元素又是main，nav，aside的父容器
所以把它设为flex容器主轴向就使用默认的从左到右
然后给main和aside元素分别设置宽度
中间的nav元素为flex：1
会根据剩余宽度计算自动填满
完成最终效果
怎么样是不是很简单？
赶紧上手写点代码练习一下吧~
入QQ群：717415872 了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人哟,记得备注来自果冻课堂!
更多内容，欢迎加大师姐微信：it_xzy
