用html css做留言功能,使用Flexbox创建一个响应式的留言板（译）_html/css_WEB-ITnose...

如果你仔细观察上面的代码，你会注意到用户留言和作者留言这两部分的 html 几乎是相同的。这两者之间的风格和布局差异都将通过 CSS 实现，分别对应这两个 CSS 类： .user-comment 和 .author-comment 。

CSS

我们看一下使用 Flexbox 布局时使用的相关技术。如果你想查看全部的 css 样式，可以在文章的顶部下载整个 css 文件。

首先我们要给所有的评论设置 display: flex ，这使我们能够在评论以及子元素中使用 Flexbox 的属性。

.comment{ display: flex;}

这些 flex 容器要这充满当前布局的宽度，并且能够包含用户信息、头像和消息内容。因为我们想让作者写的评论向右对齐，我们可以使用下面的属性来调整。

.comment.author-comment{ justify-content: flex-end;}

现在我们的评论看起来像是这样：

现在已经是右对齐了，但好似我们希望这其中的元素能够倒序显示，让消息内容显示在第一位，然后才是头像和右侧的信息。要做到这一点，我们将使用 order 属性。

.comment.author-comment .info{ order: 3;} .comment.author-comment .avatar{ order: 2;} .comment.author-comment p{ order: 1;}

正如你所看到的，在 Flexbox 的帮助下，整个东西实现起来很容易。

我们的留言板看起来已经是我们想要的样子了，剩下的唯一一件事就是确保它在小设备上也能友好的显示。由于小设备上的屏幕空间有限，我们不得不重新做一些布局，使我们的内容更易阅读。

我们设置了一个媒体查询，使得留言内容部分扩大，占用容器的整个宽度。这将导致头像和用户信息移动到下一行，因为他们的 ·flex-wrap·属性设置为·wrap·。

@media (max-width: 800px){ /* Reverse the order of elements in the user comments, so that the avatar and info appear after the text. */ .comment.user-comment .info{ order: 3; } .comment.user-comment .avatar{ order: 2; } .comment.user-comment p{ order: 1; } /* Make the paragraph in the comments take up the whole width, forcing the avatar and user info to wrap to the next line*/ .comment p{ width: 100%; } /* Align toward the beginning of the container (to the left) all the elements inside the author comments. */ .comment.author-comment{ justify-content: flex-start; }}

你可以看看下面的图片与上面的进行对比，你也可以在文章的开始，点击演示，并调整你的浏览器的大小查看留言板的变化。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！

合作方式

Copyright © 2004-2018 https://www.gxlcms.com/. All Rights Reserved.

豫ICP备19030742号