在Flexbox Froggy 游戏中搞定flex布局最近发现了一款学习flex布局的游戏,分享给大家 => Flexb

最近发现了一款学习flex布局的游戏,分享给大家 => Flexbox Froggy

一共24关,下面开始通关之旅~

附上参考答案

justify-content: center;
align-items: center

justify-content: space-around;
align-items: flex-end

flex-direction: row-reverse;
justify-content: flex-end

flex-direction: column;
justify-content: flex-end

flex-direction: column-reverse;
justify-content: space-between

flex-direction: row-reverse;
justify-content: center;
align-items: flex-end

flex-direction: column;
flex-wrap: wrap

flex-direction: column-reverse;
align-content: center

flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between

Flex 布局原理就是：给父盒子添加 flex 属性，来控制子盒子的位置排列方式从而实现 flex 布局。

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

Flex 布局中默认的主轴是 row，x轴。

如果想改变主轴方向可通过设置 flex-direction 来改变。

flex-direction:column;将主轴改为y轴，纵轴。

flex-direction:row; 将主轴改为x轴，横轴。

flex-direction:row- reverse;主轴为x轴，并且翻转。

flex-direction:column- reverse;主轴为y轴，并且翻转。

通过 justify-content 能够设置主轴子元素排列形式。

值为 flex-start 所有子元素在主轴头部显示。

值为 flex-end 所有子元素在主轴尾部显示。

值为 flex-center 所有子元素在主轴居中对齐。

值为 space-around 所有子元素平分剩余空间。

值为 space-between 所有子元素先两边贴边在平分剩余空间。

flex-wrap 控制子元素是否换行。

开启 flex 布局后默认为不换行。

如果想要换行效果设置 flex-wrap：wrap。

align-items 设置侧轴子元素排列。

利用align-items 能够设置侧轴元素对齐的方式在子项为单项（单行）的时候使用。

align-items 的值为flex-start 表示从头开始。

align-items 的值为flex-end 表示从结尾开始。

align-items 的值为center 表示居中显示。

align-items 的值为stretch 会将子元素拉伸。

align-content 设置侧轴子元素排列。

Align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

Align-item 和 align-content 的区别单行找 align-items 多行找 align-content。

flex-flow 就是 flex-direction 和 flex-wrap 的合写。

order是设置在items里面的属性,具体作用是可以决定本身的排列先后顺序。

子元素可以通过设置 order 数值的大小来设定在页面中出现的顺序，数值小的在前，数值大的在后。

align-self 属性定义 flex 子项单独在侧轴（纵轴）方向上的对齐方式，并覆盖已有的 align-items 的值。

此属性接受与align-items特定项目的值相同的值。