使用 Flexbox 创建一个响应式的留言板(译)_html/css_WEB-ITnose
程序员文章站
2022-03-25 15:23:44
...
原文链接: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