学习如何使用 Flexbox
学习如何使用 Flexbox
教学学习
我对 flexbox-froggy 和 grid garden 大喊大叫 ^
在我为期 15 周的编码之旅中，我尝试在第一次尝试中成功地学习如何将 div 居中……至少可以说是谦虚了。
为了完全掌握我最有用的工具之一：
[
Flexbox 青蛙
一款学习 CSS flexbox 的游戏
flexboxfroggy.com
我会尽我所能教它的布局能力。
如何使用弹性盒
-
为了让你的 css 理解你使用的 flexbox，你必须首先在你的 css 元素中包含这一行：
显示：弹性
-
对齐项目 水平 ：
证明内容：
^这里是踢球者，它可以采用以下任何值：
-
**弹性启动**：项目与容器的左侧对齐。 -
**弹性端**：项目与容器的右侧对齐。 -
**中央**：项目在容器的中心对齐。 -
**间隔**：项目以相等的间距显示。 -
**环绕空间**：项目以等间距显示。 -
对齐项目 垂直 ：
对齐项目：
^这需要这些值：
-
**弹性启动**：项目与容器顶部对齐。 -
**弹性端**：项目与容器底部对齐。 -
**中央**：项目在容器的垂直中心对齐。 -
**基线**：项目显示在容器的基线处。 -
**拉紧**：物品被拉伸以适合容器。 -
要对齐页面中心的项目，您可以同时添加！
证明内容：中心；
对齐项目：中心； -
将容器中的项目设置在某个方向：
弯曲方向：
^这需要这些值：
-
**排**：项目的放置与文本方向相同。 -
**行反向**：项目放置在与文本方向相反的位置。 -
**柱子**：项目从上到下放置。 -
**列反向**：项目从下到上放置。 -
以特定顺序设置特定项目：
命令：
^这可以为单个项目添加数字属性。默认情况下，项目的值为 0，但我们也可以使用此属性将其设置为正整数或负整数值（-2、-1、0、1、2）。
-
对齐特定项目：
对齐自我：
^ 与 align-items 一样，它采用以下值：
-
**弹性启动**：项目与容器顶部对齐。 -
**弹性端**：项目与容器底部对齐。 -
**中央**：项目在容器的垂直中心对齐。 -
**基线**：项目显示在容器的基线处。 -
**拉紧**：物品被拉伸以适合容器。 -
展开您的物品：
弹性包装：
^这需要这些值：
-
**无包装**：每个项目都适合一行。 -
**裹**：项目环绕到其他行。 -
**换行**：项目反向环绕到附加行。 -
结合 flex-direction 和 flex-wrap：
弹性流：
^这首先取 flex-direction 值，然后是 flex-wrap 值；像这样：
flex-flow: column-reverse wrap-reverse
-
设置多行的间距：
对齐内容：
^这需要这些值：
**弹性启动**: 线装在容器的顶部。**弹性端**: 线装在容器的底部。**中央**: 线在容器的垂直中心包装。**间隔**：行以相等的间距显示。**环绕空间**: 行以相等的间距显示在它们周围。**拉紧**：线条被拉伸以适合容器。
快乐编码！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
