周末玩儿了一个小游戏, 关于flex弹性布局的, 加上之前面试的时候被问到过相关的问题, 所以决定单独写一篇文章来总结一下, 需要的朋友直接点链接可以免费玩(我玩儿的时候免费, 据说之后会收费).
整体的剧情就是你作为一个冒险者, 拿着一把弓箭, 去射僵尸, 僵尸的排布不一, 且还会动态变化(弹性布局), 有一个mentor指导你, 会把flex的技巧都覆盖到, 而且很直观, 所敲即所得. 还是比较有意思滴~
友情提醒: 需翻墙, 全英文, 当然, 可跳过剧情, 直接撸!
总体来说flex是一个相对的概念, 需要在父元素上进行设置.
.Parent{
display: flex
}
只需这一个设置便可以实现flex布局了, 只是所有剩下的参数都是默认的, 那么默认的参数都是什么呢?
- flex-direction: row
- flex-wrap: nowrap
- flex-flow: flex-diretion flex-wrap
- justify-content: flex-start
- align-items: flex-start
- align-content: flex-start
以上是所有父元素的设置属性, 子元素有哪些呢?
- align-self, 默认跟父元素的align-items一致
- flex 这一个属性包含了三个, 如果写了flex, 那么默认值就是0 1 auto, 也是 initial 设置的对应值, 还有剩余两个, auto 对应1 1 auto, none 对应 0 0 auto
- flex-grow
- flex-shrink
- flex-basis
- 注意, 如果使用的是flex, 没有写flex-basis会默认为0, 这样导致的后果是在shrink的时候会缩短到0.
- 注意, 如果是设置了双值, 其中一个带有单位的话即为flex-basis, 前一个值会被识别为flex-shrink. 比如 flex: 1 300px; 表示flex-shrink: 1; flex-basis: 300px;
- 如果不设置flex, 默认为0 1 auto;
- min-width, max-width, min-height, max-height这个会限制flex-shrink和flex-grow的大小.
- order 表示子元素的顺序, 从大到小, 从flex-start到flex-end排列, 可为负数.
好了, 属性基本上就是那么多.
属性值再说一下.
- flex-direction
- row
- row-reverse
- column
- column-reverse
- flex-start, 根据direction的顺序为: 左, 右, 上, 下
- flex-end, 根据direction的顺序为: 右, 左, 下, 上
- flex-wrap
- wrap
- nowrap
- wrap-reverse
- 说一下wrap-reverse, 是将下一行按照flex-direction的反过来, 比如flex-direction为row, 那么正常的wrap是从上到下, 而reverse了就是从下到上了.
- justify-content, align-items, align-content, align-self都可应用:
- 位置类属性
- flex-start, start
- flex-end, end
- center
- 分布类属性
- space-around
- space-between
- space-evenly
- stretch
- 位置类属性
