波本與flexbox的兩列布局

Question

我想用波旁使用flexbox創建兩個列布局。這裏的代碼：

.module_grid { 
    margin: 0 3rem 4rem 0; 
    flex: 0 0 100%; 
    @include display(flex); 
    @include flex-direction(column); 
    @include align-items(flex-start); 
    @include justify-content(flex-start); 
    .module_grid_item { 
    @include flex(1); 
    flex: 0 0 50%; 
    padding: 3rem 0 0 3rem; 
    width: 50%; 
    .module_header { 
     -webkit-column-break-inside: avoid; 
    } 
    } 
    .module_grid_item.double_module { 
    flex: 0 0 100%; 
    width: 100%; 
    } 
} 

這裏的問題是，我總是得到的項目顯示在一列。 請幫忙嗎？

Answer 1

我想你想

@include flex-direction(row); 

，而不是@include flex-direction(row);。 row的值將方向設置爲從左到右，正如here所解釋的那樣。