学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解

欢迎来到Flexbox Froggy，这是一个通过编写CSS代码来帮助Froggy和朋友的游戏!

justify-content 和 align-items 是两个用于控制 CSS Flexbox 布局的属性。

1. justify-content：该属性用于控制 Flexbox 容器中子项目在主轴（水平方向）上的对齐方式。
2. align-items：该属性用于控制 Flexbox 容器中子项目在侧轴（垂直方向）上的对齐方式。

这两个属性常用于网页设计中，以实现对齐和布局的灵活控制。

flex-start:项目在容器的左侧对齐。
flex-end:项目与容器的右侧对齐。
center:项目在容器的中心对齐。
space-between:项目之间以相等的间距显示。
space-around:以等距显示项目。
例如:justify-content: flex-end;会把青蛙移到右边。

\1.第一关

justify-content:flex-end;

右侧对齐就好

\2. 第二关

justify-content:center;

center:项目在容器的中心对齐

\3. 第三关

justify-content:space-around;

space-around:以等距显示项目。

\4. 第四关

justify-content:space-between;

space-between:项目之间以相等的间距显示。和第三关细节上略微区别，区别在边上留白与否。

\5. 第五关

align-items:flex-end;

flex-end:项目与容器的右侧对齐。

\6. 第六关

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

justify-content：该属性用于控制 Flexbox 容器中子项目在主轴（水平方向）上的对齐方式。

align-items：该属性用于控制 Flexbox 容器中子项目在侧轴（垂直方向）上的对齐方式。

center:项目在容器的中心对齐。

7.第七关

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

justify-content：该属性用于控制 Flexbox 容器中子项目在主轴（水平方向）上的对齐方式。

align-items：该属性用于控制 Flexbox 容器中子项目在侧轴（垂直方向）上的对齐方式。

space-around:以等距显示项目。

flex-end:项目与容器的右侧对齐。

\8. 第八关

flex-direction:row-reverse;

flex-direction 是 CSS 中用于设置 Flexbox 容器主轴方向的属性。

row-reverse 是 CSS 中 flex-direction 属性的一个值，用于指定 Flexbox 容器中子项目的水平排列方向为从右到左，而不是默认的从左到右。

效果：

• 主轴方向：从右到左。
• 侧轴方向：与设置前相同（取决于 align-items 和 align-content 的值）。
• 子项目的排列顺序：从最后一个子项目开始，依次向前排列。

\9. 第九关

flex-direction:column;

column 的作用是：

• 将 Flexbox 容器的主轴方向设置为垂直方向（column）。
• 子项目从上到下排列，默认情况下，即从 Flexbox 容器的起始边（顶部）开始排列到结束边（底部）。

\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;
align-items:flex-end;
justify-content:center;

\14. 第十四关

order: 1;

order: 1; 的作用是将具有该样式的元素在主轴方向上排在其他默认顺序之后

\15. 第十五关

order:-1;

提前排列，负数就行

\16. 第十六关

align-self:flex-end;

• align-self 属性接受的值与 align-items 相同，包括：flex-start, flex-end, center, baseline 和 stretch。
• 当您在某个子项上设置 align-self: flex-end; 时，它将使该特定子项沿着容器的侧轴方向（垂直方向）的末端对齐，即靠近容器底部。

\17. 第十七关

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

\18. 第十八关

flex-wrap:wrap;

flex-wrap 属性有以下几种取值：

• nowrap：默认值。子项目不换行，所有子项目都尽可能地放在一行内，可能会导致溢出。
• wrap：当子项目在主轴方向上无法放下时，子项目会换行放置，第一行在上方，第二行在下方，以此类推。
• wrap-reverse：与 wrap 相似，但是换行后的行的排列顺序是反向的，即第一行在下方，第二行在上方，以此类推。

\19. 第十九关

flex-direction:column;
flex-wrap:wrap;

\20. 第二十关

flex-flow:column wrap;

和19关效果一样，只不过只能输入一句程序

\21. 第二十一关

align-content:flex-start;

flex-start：子项在交叉轴上的起始边对齐。

\22. 第二十二关

align-content:flex-end;

\23. 第二十三关

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

只有两句程序位置，一点点小复杂

先水平/垂直反转一下

再居中

\24. 第二十四关

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

最复杂的一关

wrap-reverse 的作用如下：

• 当容器的主轴方向上没有足够的空间容纳所有子项目时，会进行换行。
• 与 wrap 相比，wrap-reverse 的区别在于换行后的子项目行的排列顺序是反向的，即第一行在最底部，第二行在第一行的上方，以此类推。
• 如果 Flexbox 容器的主轴方向是水平的，则换行后第一行在底部，依次向上排列；如果主轴方向是垂直的，则换行后第一行在最右侧，依次向左排列。

flex-direction:column-reverse;

按列排还是倒着的列

居中

space-between 值会使得子项在交叉轴上均匀分布，首行/列与容器的起始边对齐，末行/列与容器的结束边对齐，中间的行/列之间有相等的间距。（边上不留白）