我正在学习什么

css 赋予了页面活力。多年来，css 变得越来越强大，并且已经开始用于制作以前需要 javascript 的动画。本周我一直在研究它的一些更高级的属性。

媒体查询

媒体查询几乎已经成为新时代设备的必需品。随着智能手机的出现，通过手机消费媒体的人比任何其他设备都多。因此，网站必须在移动设备上看起来不错，而且在大尺寸屏幕上也有良好的呈现效果。我们该如何做到这一点？嗯，部分......

弹性盒！

当将媒体查询与 flexbox 结合时，css 成为工具箱的强大工具。 （几乎是一种类似 unix 的哲学，将小工具组合成一个大工具）现在我们可以做一些非常酷的事情。

实际上，flexbox 将根据您设置的 flexbox 规则来处理框中的第一个子元素：

.flexbox {
    /* Turns on flexbox */
    display: flex;
    /* How would you like stuff displayed? Rows, columns... maybe display the items in reverse order?*/
    flex-direction: row;
    /* How do you want to spacing between your items to work? */
    justify-content: flex-end;
    /* How do you want items arranged on the main axis? */
    align-items: center;
    /*And so on...*/
}

这是我第一次真正尝试使用 flexbox，因此我提供了一些材料，这些材料可以为您提供比我上面的简短解释更完整的信息。其中的内容远比我在这里所能涵盖的更多。

立即学习“前端免费学习笔记（深入）”；

附加参考资料

mdn：使用媒体查询
mdn：flexbox
css 技巧：flexbox 指南

玩转 flexbox

查看：https://flexboxfroggy.com
另：https://mastery.games/post/flexboxzombies2/
现在您可以真正使用 flexbox 了！

我接下来要做什么？

现在我们进入有趣的部分了。有了我学到的一些基本工具，现在我要开始制作作品集了。作品集是向雇主和其他人展示您一直在做什么的一种方式。我预计随着我的继续，这种情况会改变很多次。但首先，让我们看看是否能让作品集看起来不错！ css 会帮助我做到这一点。推动并看看我能用它做什么应该很有趣。我预计会遇到一些障碍，甚至可能需要在下一步写作时纠正一些理解，所以我不会将其视为 css 和 flexbox 的明确看法。

随机的离别的想法

需要一些 lorem ipsum 占位符吗？为什么不加点香料呢！

• https://baconipsum.com/ -- 非常适合肉食动物
• http://officeipsum.com -- 如果你想严重冒犯我，就用这个。
• https://cupcakeipsum.com -- 对于我们当中的甜食爱好者来说。

对于 vscode 用户，一些扩展：

• lotus-ipsum: 万智牌占位符文本
• horadrim ipsum：献给暗黑破坏神粉丝！

以上就是CSS 太棒了！的详细内容，更多请关注php中文网其它相关文章！