【心得】你今天青蛙了吗? Flex之路-align-items vs. align-content 傻傻分不清楚

前言

据说在好久以前(并没有多久!)，在神器flex出现以前都要自己计算尺寸下去做排版

自从Flex出现之後，很多人都染上了毒瘾，从此踏上不归之路~

听到就吓到了!?这麽好用万一忘记根本怎麽办!?

所以我都故意不用flex下去练习、直到某天发现...

天啊我flex用的很不顺手...囧

这样怎麽行!马上练起来

学习资源

1. 首先推荐Amos老师的玩转 CSS FLEX，虽然是免费的，但是品质与内容堪称精品，看完之後对flex会有7分的了解~当然要记得不能只看不做，可以跟着老师的范例自己写一次，最後的3分熟练要靠自己呀

2. 看完影片之後，就可以开始玩青蛙罗~https://flexboxfroggy.com/
   
   免费的青蛙游戏，里面可以应用到flex的各种属性，绝对是入门上手的好东西!

flex的U质学习资源与文章太多了~
基本属性的部分我就不再多做说明
直接对我当时容易搞混、迷惑的地方做一点心得分享 :)

马上进入今天的主题：

align-items vs. align-content 傻傻分不清楚

如果今天用的是flex-direction:row,让物件横排
那麽align-items/content 管的就是物件上下的位置
那...两个管的都是上下，有什麽不同吗?
先来看看两个能用的属性~

align-items

• flex-start
• flex-end
• center
• stretch

align-content

• flex-start: 多行都集中在顶部。
• flex-end: 多行都集中在底部。
• flex-end:: 多行居中。
• space-evenly: 行与行之间保持相等距离。
• space-between: 左右贴齐边缘
• space-around: 每行的周围保持相等距离。
• stretch: 每一行都被拉伸以填满容器。(预设)

注意到了吗?align-content跟 justify-content的文字中的 content 意思是"内容"，且都能使用 space 系列!(space-evenly、space-between、space-around)
喔!停下来想一想这其中的含意
那就代表...align-content是针对很多列的情况下使用

还是雾煞煞没关系
我们来玩一下就知道了

/*父层设定*/
width: 600px;
height: 600px;
display:flex;
flex-wrap:wrap;

先来看看如果在很多列的情况下
1.先不设定align-items&align-content
2.每一个方块不设定高
3.设定不同的 width 来看分配状况

这个时候的高会根据列数平均分配到每一列

接下来方块固定使用width:160px，并加入
1.方块设定 height: 50px;
2.align-items:center;

看起来是这个样子的

怎麽跟想像的不一样!?不应该要全部集中在灰色父层的中央吗??
怎麽会各自分散呢?
别急别急，flex其实还在帮每一列分配高度
手工划分一下区域就很明显了

每一个方块上下的橘色区域都是相等的

把
align-items:flex-star;
align-items:center;
align-items:flex-end;
都设定一轮!
会发现方块依旧维持在原本的位置上下移动

Q:如果要把这些方块集中在一起移动要怎麽做呢?

方块一样固定使用width:160px，并加入
1.方块height: 50px
2.✨align-content✨

如果要方块全部都集中在一起进行上下移动，就必须要出动align-content
它可以让多行进行整体的移动

简单来说就是...要多行整体性移动比较适合使用align-content
如果是只操作一列的话用align-items (只有一列用align-content看不出效果)

这样align-items 、align-content是不是就不再傻傻分不清楚了呢!
flex好好吸~明天继续flex研修之路!