使用 Flexbox 创建一个响应式的留言板（译）_html/css_WEB-ITnose

原文链接：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 非常的简单，我们有一个留言的列表，和一个留言框。

AnieSilverston            4 hoursago