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

一共 24 关

附上参考答案

1、justify-content: flex-end

2、justify-content: center

3、justify-content: space-around

4、justify-content: space-between

5、align-items: flex-end

6、justify-content: center;
     align-items: center

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

8、flex-direction: row-reverse

9、flex-direction: column

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

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

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

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

14、order: 1

15、order: -1

16、align-self: flex-end

17、order: 1;
      align-self: flex-end

18、flex-wrap: wrap;

19、flex-direction: column;
      flex-wrap: wrap

20、flex-flow: column wrap

21、align-content: flex-start

22、align-content: flex-end

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

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

总结

Flex 布局原理就是：给父盒子添加 flex 属性，来控制子盒子的位置排列方式从而实现 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

flex-direction

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

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

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

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

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

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

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

flex-wrap

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

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

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

align-items

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

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

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

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

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

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

align-content

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

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

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

flex-flow

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

order

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

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

align-self

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

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