pure.CSS：響應中心列

Question

自舉3有一個簡單的解決方案，在這裏描述的中心多列：http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

是否有可能與雅虎pure.CSS做到這一點？如果是，如何？

對於您的建議，並提前幫助很多謝謝！

Answer 1

您可以通過創建一個新的CSS輔助類的純網格div（.pure-g）內居中.pure-u-*項目實現這一點：

.center { 
    justify-content: center; 
} 

justify-content被使用，因爲.pure-g使用Flexbox的。添加.center類來定義純格，然後將圍繞孩子的div：

<div class="pure-g center" style="background-color:blue"> 
    <div class="pure-u-1 pure-u-md-1-3" style="background-color:teal"> 
     column 1 
    </div> 
    <div class="pure-u-1 pure-u-md-1-3" style="background-color:red"> 
     column 2 
    </div> 
</div> 

這CodePen具有響應中心網格的兩個例子。