Question

我有一排我不需要12列基础网格。是否可以将这些列缩放到全宽，并且在基础之间动态计算列之间的边距（而不是使用类小/中/大偏移），以使其适合屏幕大小？

这是我的编码，其中列直接相邻：

<div class="row">
<div class="large-2 medium-2 small-2 left white centered" >
      //Content
 </div>

 <div class="large-1 medium-1 small-1 left white centered" >
      //Content
 </div>
 <div class="large-2 medium-2 small-2 left white centered" >
      //content
 </div>
 <div class="large-1 medium-1 small-1 left white centered" >
      <//content
 </div>

 <div class="large-1 medium-1 small-1 left white centered" >
      //content
 </div>
 <div class="large-1 medium-1 small-1 left white centered" >
      //content
 </div>

Answer 1

Foundation 6内置了Flex网格，可以很容易地创建任何结构，对于Foundation 5，你可以添加CSS来实现它。

<div class="flex-row">
    <div class="columns">
        //Content
    </div>
    <div class="columns">
        //Content
    </div>
    <div class="columns">
        //content
    </div>
    <div class="columns">
        //content
    </div>
    <div class="columns">
        //content
    </div>
    <div class="columns">
        //content
    </div>
</div>

CSS

.flex-row{
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.flex-row .columns{
   -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    min-width: 0;
}

参见示例http://codepen.io/shoaibik/pen/dXWYLO

基础：将网格的列缩放到全宽

1 个答案: