股票场内基金交易，没时间盯盘？
原文链接：http://tutorialzine.com/2015/11/using-flexbox-to-create-a-responsive-comment-section/
Flexbox 是网页布局的一个强大的新方式，使得一些具有挑战性的 web 开发变得简单。现在几乎所有的浏览器都支持它，所以现在已经是时候让它融入到你的前台开发中了。
这就是为什么要在这个快速教程中，我们使用 Flexbox 构建一个留言板。我们将看一看 Flexbox 布局模式提供的一些有趣的特性，并告诉你该如何充分利用。
我们将要使用什么
Flexbox 有大量的 CSS 属性，下面这些使我们今天要用到的：
- display: flex ——这将激活 flex 布局，并且使元素的子元素遵守 flexbox 规则。
- justify-content ——这个属性定义了一个让子元素对齐的一个方法（类似于 text-align）。
- order ——order 可以控制元素排列的顺序，数值越小，排列越靠前，默认为0。
- flex-wrap ——可控制元素的换行，使用这个属性，让我们在小屏幕上也能获得支持。
布局
我们希望我们的留言本能够满足下面的几点要求：
- 每一个留言应该有一个头像，昵称，时间和内容。
- 留言的类型应该有两种，一种是作者写的（蓝色的部分和右侧的头像），另一种是其他人写的。
- 这两种类型的 HTML 标记必须要尽可能的相似，为了能够很容易的通过代码生成评论。
- 整个页面能都能响应，适配不同的屏幕。
HTML
我们的 HTML 非常的简单，我们有一个留言的列表，和一个留言框。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<ul class="comment-section"> <li class="comment user-comment"> <div class="info"> <a href="#">Anie Silverston</a> <span>4 hours ago</span> </div> <a class="avatar" href="#"> <img src="images/avatar_user_1.jpg" width="35" alt="Profile Avatar" title="Anie Silverston" /> </a> <p>Suspendisse gravida sem?</p> </li> <li class="comment author-comment"> <div class="info"> <a href="#">Jack Smith</a> <span>3 hours ago</span> </div> <a class="avatar" href="#"> <img src="images/avatar_author.jpg" width="35" alt="Profile Avatar" title="Jack Smith" /> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida sem sit amet molestie portitor.</p> </li> <!-- More comments --> <li class="write-new"> <form action="#" method="post"> <textarea placeholder="Write your comment here" name="comment"></textarea> <div> <img src="images/avatar_user_2.jpg" width="35" alt="Profile of Bradley Jones" title="Bradley Jones" /> <button type="submit">Submit</button> </div> </form> </li> </ul> |
如果你仔细观察上面的代码，你会注意到用户留言和作者留言这两部分的 html 几乎是相同的。这两者之间的风格和布局差异都将通过 CSS 实现，分别对应这两个 CSS 类：.user-comment和.author-comment。
CSS
我们看一下使用 Flexbox 布局时使用的相关技术。如果你想查看全部的 css 样式，可以在文章的顶部下载整个 css 文件。
首先我们要给所有的评论设置display: flex，这使我们能够在评论以及子元素中使用 Flexbox 的属性。
|
1 2 3 4 |
.comment{ display: flex; } |
这些 flex 容器要这充满当前布局的宽度，并且能够包含用户信息、头像和消息内容。因为我们想让作者写的评论向右对齐，我们可以使用下面的属性来调整。
|
1 2 3 4 |
.comment.author-comment{ justify-content: flex-end; } |
现在我们的评论看起来像是这样：
现在已经是右对齐了，但好似我们希望这其中的元素能够倒序显示，让消息内容显示在第一位，然后才是头像和右侧的信息。要做到这一点，我们将使用order属性。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.comment.author-comment .info{ order: 3; } .comment.author-comment .avatar{ order: 2; } .comment.author-comment p{ order: 1; } |
正如你所看到的，在 Flexbox 的帮助下，整个东西实现起来很容易。
我们的留言板看起来已经是我们想要的样子了，剩下的唯一一件事就是确保它在小设备上也能友好的显示。由于小设备上的屏幕空间有限，我们不得不重新做一些布局，使我们的内容更易阅读。
我们设置了一个媒体查询，使得留言内容部分扩大，占用容器的整个宽度。这将导致头像和用户信息移动到下一行，因为他们的 ·flex-wrap·属性设置为·wrap·。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@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; } } |
你可以看看下面的图片与上面的进行对比，你也可以在文章的开始，点击演示，并调整你的浏览器的大小查看留言板的变化。
想获得去掉 5 元限制的证券账户吗？
如果您想去掉最低交易佣金 5 元限制，使用微信扫描左边小程序二维码，访问微信小程序「优财助手」，点击底部菜单「福利」，阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」，按照文章步骤操作即可获得免 5 元证券账户，股票基金交易手续费率万 2.5。
请注意，一定要按照文章描述严格操作，如错误开户是无法获得免 5 元证券账户的。