欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用 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