本人比較喜歡做一些炫酷的特效，最近看到寫的不錯的英文文章，在本人親自試驗過后，準備將其翻譯出來，一是為了自己日后查看，二是出于分享知識的目的。下面的效果是本篇文章介紹的布局。
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標記語言應該保持較大的相似度，這樣的話就比較容易生成評論代碼了。整件事情應該完全是響應式的。
所有的事情都可以通過短短的幾行利用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;
}
這樣我們的評論列表將如下所示。
現在我們已經讓作者評論居右對齊了，但是我們想讓容器中的元素逆序排列，所以應該讓消息排在第一位，然后是頭像，再右邊才是用戶信息。我們可以利用 order 來達成這一目的。
.comment.author-comment .info{
order: 3;
}
.comment.author-comment .avatar{
order: 2;
}
.comment.author-comment p{
order: 1;
}
正如你所見，有了 flexbox 的幫助，整件事情如此簡單。
我們的評論模塊看上去正是我們想的那樣，剩下來的事就是讓它在小屏幕設備上看上去也很美觀。即使在小屏幕上沒有那么大的可用空間，但我們還是可以對布局做出一些調整讓內容看起來更易閱讀。
我們設置了一個媒體查詢，它所做的工作就是讓評論中的段落部分占據了容器的整個寬度，這將導致頭像和用戶信息移至下一行，只要將 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;
}
}
通過比較當前和上圖的屏幕規模，二者差異可以立刻被發現。你也可以打開這個例子，并且調整瀏覽器的大小去看看評論模塊隨瀏覽器大小變化是如何調整自身的。
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...
