我正在学习什么
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 太棒了！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630016.html
微信扫一扫 
支付宝扫一扫 
