Question

我正在尝试使用具有以下规格的网格：

在屏幕中＆lt; 400像素，每行显示1列
在屏幕中＆gt; 400像素和＆lt; 800像素，每行显示2列
在屏幕中＆gt; 800像素，每行显示4列
在所有屏幕尺寸中，每列的宽度应为屏幕尺寸的25％

我编写了以下代码，这个代码有效，我的问题是我们可以使用display来完成相同的结果：flex？

.row {
  border: 1px solid black;
}

.col {
  width: 25%;
  float: left;
  clear: left;
}

@media all and (min-width: 360px) {
  .col {
    clear: none;
  }
  .col:nth-child(2n + 1) {
    clear: left;
  }
}

@media all and (min-width: 720px) {
  .col {
    clear: none !important;
  }
}

.clearfix {
  overflow: auto;
  zoom: 1;
}

<div class="row clearfix">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
  <div class="col">Column 4</div>
</div>

Answer 1

对于flex模型，您需要重置flex-basis值并允许换行。

宽度较小时，不需要弯曲;

＆＃13;

.row {
  border: 1px solid black;
}

@media all and (min-width: 360px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    flex: 1 0 25%;
    box-sizing: border-box;
  }
  .col:nth-child(even) {
    margin-right: 50%;
    box-shadow:0 0 0 1px;/*see me */
  }
}

@media all and (min-width: 720px) {
  .col:nth-child(even) {
    margin: 0;
  }
}

＆＃13;

<div class="row clearfix">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
  <div class="col">Column 4</div>
</div>

＆＃13;

可能有用的教程/提醒：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

通过bootstrap-4 https://codepen.io/gc-nomade/pen/mMobBa

编辑信息和示例

＆＃13;

[class] {
  border: 1px solid black;   
}
.col-sm-3:nth-child(even) {
  margin-right:50%;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row d-flex flex-wrap">
  <div class=" col-sm-3 col-md-3 col-12">Column 1</div>
  <div class=" col-sm-3 mr-md-0 col-md-3 col-12">Column 2</div>
  <div class="col-sm-3 col-md-3 col-12">Column 3</div>
  <div class="col-sm-3  mr-md-0 col-md-3 col-12">Column 4</div>
</div>

＆＃13;

我可以在每行具有不同列数的固定宽度列吗？

1 个答案: