波旁两列布局与弹性

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的值设置了从左到右的方向，如下所示。