CSS -- 使用 Flexbox 创建评论布局

本人比较喜欢做一些炫酷的特效，最近看到写的不错的英文文章，在本人亲自试验过后，准备将其翻译出来，一是为了自己日后查看，二是出于分享知识的目的。下面的效果是本篇文章介绍的布局。

demo01.png

---

Flexbox 是一种用于创建布局的新方法，它把网页开发中一些最有挑战性的工作变得简单， 目前使用的浏览器几乎都支持这一属性，所以这是一个很好的时间去看看它如何适应你日常的前台开发工作。

这就是我们在本篇教程中使用 flexbox 构建评论模块的原因。首先我们看看 flex 布局模式为我们提供的一些有意思的属性，然后会向你展示如何充分的使用它们。

What We’re Going to Use

Flexbox 包含了许多的 CSS 属性，下面是我们今天将要使用到几个属性：

• display: flex - 激活 flex 布局模型并且使其子元素遵循 flex 布局规则。

• justify-content - 这个属性定义了一个 flexbox的子元素按照哪个方向对齐（用于设置主轴上的对齐方式）。

• order - Flexbox 利用此属性让我们准确的控制子元素的摆放位置，可以在评论模块利用这一有力的工具交换文本和图片的位置（order 的值越小其摆放位置越靠前）。

• flex-wrap - 控制 flex 元素的自动换行 。

The Layout

我们希望评论模块能够满足如下要求：

• 每条评论都应该有一个头像，姓名，评论时间和评论主体。

• 应该有两种不同的评论类型 - 一种是由作者编写的（颜色为蓝色，而且头像在右边），而另一种是由其他任何人编写的。

• 这两种评论类型的 HTML 标记语言应该保持较大的相似度，这样的话就比较容易生成评论代码了。

• 整件事情应该完全是响应式的。

demo01.png

所有的事情都可以通过短短的几行利用flexbox 的 CSS 代码完成，下面我们将重点放到代码上。

The HTML

HTML 代码非常的直接，而且我们将拥有一个评论列表，以一种基本的形式将新的评论写在列表的最后。

    <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 处理，具体地说，是通过添加 user-comment 和 author-comment 类。

The CSS

接下来我们看看在创建布局时使用到的 flexbox 相关技术。

首先，我们为所有 comment 设置 display: flex ，这样我们就可以为 comment 及其子元素应用 flexbox 属性。

    .comment{
        display: flex;
    }

这些 flex 容器占据了整个评论模块的宽度而且容纳了用户信息，头像和消息。由于我们想让作者书写的评论居右对齐，所以使用下列的 flex 属性让所有内容居容器末尾对齐。

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

这样我们的评论列表将如下所示。

demo02.png

现在我们已经让作者评论居右对齐了，但是我们想让容器中的元素逆序排列，所以应该让消息排在第一位，然后是头像，再右边才是用户信息。我们可以利用 order 来达成这一目的。

    .comment.author-comment .info{
        order: 3;
    }

    .comment.author-comment .avatar{
        order: 2;
    }

    .comment.author-comment p{
        order: 1;
    }

正如你所见，有了 flexbox 的帮助，整件事情如此简单。

demo03.png

我们的评论模块看上去正是我们想的那样，剩下来的事就是让它在小屏幕设备上看上去也很美观。即使在小屏幕上没有那么大的可用空间，但我们还是可以对布局做出一些调整让内容看起来更易阅读。

我们设置了一个媒体查询，它所做的工作就是让评论中的段落部分占据了容器的整个宽度，这将导致头像和用户信息移至下一行，只要将 comment 的 flex-wrap 属性设置成 wrap 。

    @media (max-width: 800px){
        .comment.user-comment .info{
            order: 3;
        }

        .comment.user-comment .avatar{
            order: 2;
        }

        .comment.user-comment p{
            order: 1;
        }


        .comment p{
            width: 100%;
        }

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

通过比较当前和上图的屏幕规模，二者差异可以立刻被发现。你也可以打开这个例子，并且调整浏览器的大小去看看评论模块随浏览器大小变化是如何调整自身的。

demo04.png

Conclusion

是时候总结下这篇教程了。 我们希望这可以给你一个建立实际 flexbox 布局的练手项目。 如果你的好奇心还没有得到满足，下面是一些你可能感兴趣的资源。

• CSS-Tricks’ guide to flexbox - here

• An in-depth MDN article - here

• A website with easy flexbox solutions for classic CSS problems - here

---

原文地址

Ending...