学习如何使用 Flexbox

学习如何使用 Flexbox

教学学习

Photo by 梅兰妮瓦勒斯 on 不飞溅

我对 flexbox-froggy 和 grid garden 大喊大叫 ^

在我为期 15 周的编码之旅中，我尝试在第一次尝试中成功地学习如何将 div 居中……至少可以说是谦虚了。

为了完全掌握我最有用的工具之一：

[

Flexbox 青蛙

一款学习 CSS flexbox 的游戏

flexboxfroggy.com

](https://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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/33262/28531309