照片：KOBU AgencyonUnsplash
CSS开发教程
正如我们承诺的那样，在这篇文章中，你和我将把我们在上一篇文章中学到的flexbox属性运用起来。我将做3个假设。
- 你有一个移动设备。笔记本电脑或手机。是的，你可以用你的手机编码。如果你不相信我，请点击这里。
- 你知道如何打字。如果不会，在你的键盘上，只需按下与你屏幕上开始显示的符号相似的按钮即可
- 你有一个你熟悉的代码编辑器。我将会使用VS代码。
- 你对HTML和CSS有基本的了解
开始吧
在我们开始之前，我们首先要按照以下3个步骤建立我们的游乐场。
- 创建一个新的目录（文件夹），并将其命名为 "practise"
- 在这个目录下创建一个新的文件，命名为 "index.html"
- 最后，在同一目录下创建一个新文件，命名为 "style.css"
好了，终于到了编码时间了。
首先，在我们的HTML文件中，"index.html"。让我们在其中键入以下代码。
- 上面，我们做了一个基本的HTML文件，在标签里有一个链接到我们先前创建的 "style.css "文件的标签。然后在标签中，我们做了一个容器，它有5个项目，也是div标签。
现在解开我们的CSS文件，主要的东西会在这里发生
- 第二，在我们的CSS文件中。我们将从输入基本的重置开始。就是说。
- 接下来，我们给我们的容器一个漂亮的背景颜色和漂亮的填充。
- 然后，我们给我们的项目以漂亮的padding、margin、background-color、color和font-size。
- 因此，从上一篇文章中，我们知道，为了让一个容器能够获得权力，你必须把它的显示设置为flex。
在将容器的显示属性设置为flex之前
............................👇👇👇👇👇👇👇👇👇.................................
- 而我们之前学过的 默认的容器和项目属性立即生效了。
..................👇👇👇👇👇👇👇👇👇👇👇👇...........................
从容器的属性开始
- 该 flex-direction被设置为行，即主轴的方向是从左到右
- 的 flex-wrap被设置为nowrap
- 设置为 调整内容被设置为flex-start，即柔性项目在柔性容器的开始处排队。
- 设置为 align-items被设置为拉伸
- 设置为 align-content被设置为拉伸
我们要玩的是其中的3个容器属性，我们要检查的第一个属性是
- flex-direction。由于它的默认值是行，因此柔性项目从柔性容器的起点开始，按从左到右的方向从头到尾排成一排。
- 让我们看看如果我们把它的值改为行逆向会发生什么
...................👇👇👇👇👇👇👇👇👇👇👇👇.............................
将 "flex-direction "设置为 "row-reverse "后
- 主轴的方向现在从右到左。而且，柔性项目现在是从柔性容器的末端开始的。
- 接下来，让我们看看如果我们把它的值改为列会发生什么
................👇👇👇👇👇👇👇👇👇👇👇👇👇👇.....................
在将 "flex-direction "设置为 "column "之后
- 啊，柔性项目的主轴从上到下，相互堆叠在一起。( 这与我们开始时，在我们甚至将容器的显示方式设置为flex之前，项目的情况是完全一样的)
- 最后，让我们看看如果我们把它的值改为列反转会发生什么。
................👇👇👇👇👇👇👇👇👇👇👇👇👇.............................
在将 "flex-direction "设置为 "column-reverse "之后
- 现在，flex项目的主轴方向是从底部到顶部，仍然是相互堆叠在一起的。
我不知道你怎么想，但我觉得这超级酷。让我们转到另一个属性
2.justify-content。如果你还记得之前的文章，这个属性是用来控制项目应该如何沿主轴定位的。那么，这个属性的默认值是flex-start，这就是为什么flex项目从flex容器的开头开始。
- 让我们把这个值改为居中。
..........👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇........................
啊啊啊，项目被自动定位在容器的中心。
注意：项目之间的空间是由于我们之前定义的 "margin:30px "而存在的。如果我们去掉它，容器之间就不会有任何空间了。
.......................👇👇👇👇👇👇👇👇👇👇👇👇.........................
所以，"center " 值所做的只是将柔性项目定位在容器的中心。
- 好吧，让我们试试把值改为space-between
.....................👇👇👇👇👇👇👇👇👇👇👇👇.......................
哇，柔性项目之间的空间是均匀分布的。你能相信flex box会自动为我们做所有这些计算吗？
另一个很酷的事情是，所有这些都是响应式的。如果你改变你的浏览器的宽度，这些项目之间的空间也会自动调整。
奖励：再试试去掉空白，看看会发生什么。
- 让我们来试试周围空间的值。
....................👇👇👇👇👇👇👇👇👇👇👇👇👇👇.....................
因此，尽管上面的图片看起来与前面的图片没有任何不同。这个值在每个弹性项目的左边和右边都放置了相同的空间。这意味着任何两个项目之间的空间都是第一个或最后一个项目前面的空间的两倍 - （图片）
注意：我的箭头与我的文字不匹配，因为我们添加了边距。试着去掉这个空白。
- 下一个值是空间均匀的值。
...............👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇...............
因为我们实际上看不到，因为上面的图片看起来和其他的图片没有什么不同😂。但这个值只是确保任何灵活项目前面和之间的空间总是相同的。
注意：再次强调，我的第一个和最后一个箭头与我的文字不匹配，因为我们添加了保证金。试着去掉边距
快速测试。均匀空间 和环绕空间的微妙区别是什么？
- 最后，让我们试试flex-end的值
...............👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇...............
flex项目被定位在容器的末端，也就是右侧。为了好玩，让我们看看如果我们把flex-direction设置为row-reverse会发生什么？
...............👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇...............
很好，你知道为什么上面的图片是这样的，如果不重读关于flex-direction的要点的话
3. align-items。这个属性定义了项目如何沿着横轴对齐。
将我们的代码设置回第一阶段，即仅仅将显示方式设置为flex，我们的项目就已经完全对齐了。因此，为了使其发挥作用，我们需要使其中一个项目变大。因此，在第2项上建立一个新的类，叫做 "i2"，并将其高度设置为200px这样的好东西。
第1步
第二步
立即发生了变化，所有项目的高度都增加了
这是因为 align-items的默认值被设置为stretch，在stretch时**，就**会发生这样的情况
- 让我们试试居中。也就是把align-items的值设置为 center
...............👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇...............
酷，这次使用center将flex项目设置为容器相对于 横轴 和最大项目的中心。
- 让我们试试flex-start
...............👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇...............
好了，现在所有的柔性项目都很好地排列在相对于横轴的柔性容器的顶部。柔性结束也是如此。
...............👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇...............
不要忘了所有这些都是沿着 十字轴
- 最后一个值叫做基线。 要理解这个值，我们必须增加任何项目的字体大小**。**
第1步
第2步
现在让我们来试试吧。
啊啊啊，它将柔性项目上的文字沿着一条线对齐。因此，如果我们沿着文本画一条假想的线，我们会看到它都是对齐的。就这样在...
结论
这就是我希望你和我一起玩的属性，因为它们是最常用的flexbox属性。你可以随时自己查看其他的属性。在这里使用这些链接来阅读它们(校正内容, 对齐项目, 对齐内容).别担心这不是结束，这只是暂时的告别。在下一篇文章中，你和我将会玩玩柔性项目的属性和值。
