是否可以使用CSS flexbox修复列的数量，开始和结束位置？

Question

我很晚才发现使用网格的代码在IE11上无法运行。我想知道是否可以使用flex来调整它。

css display grid and IE11

使用每个项类class_start_1和column_end_7的css属性，我想将项目放在12列网格中。

如果使用列，则必须转到同一行。

https://codepen.io/matoeil/pen/OzNzRK

<div class="field-items">
  <div class="entity entity-paragraphs-item column_start_1 column_end_7"></div>
    <div class="entity entity-paragraphs-item paragraphs-item-bloc-lien column_start_7 column_end_10">whatever</div>
    <div class="bloc-lien-item entity entity-paragraphs-item paragraphs-item-bloc-lien column_start_10 column_end_13"></div>


  <div class="bloc-lien-item supposed_to_be_above entity entity-paragraphs-item paragraphs-item-bloc-lien column_start_1 column_end_3">that block is supposed to be above since the first row has been used . This is the behaviour on other browser than IE11</div>
</div>

CSS

.field-items {
     display: -ms-grid;
  display:grid;
  /* grille de 12*/

 -ms-grid-columns: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
  grid-template-columns: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
  -ms-grid-rows:400px;
}

.field-items > .entity-paragraphs-item{
   border:1px solid red;
}

.bloc-lien-item {
      word-wrap: break-word;
 }

.supposed_to_be_above{
  color:blue;
}

/*    ----------    display:grid  -----------------   */
.column_start_1{
  -ms-grid-column: 1;
  grid-column-start: 1;
}

.column_start_2{
  -ms-grid-column: 2;
  grid-column-start: 2;
}
.column_start_3{
  -ms-grid-column: 3;
  grid-column-start: 3;
}
.column_start_4{
  -ms-grid-column: 4;
  grid-column-start: 4;
}
.column_start_5{
  -ms-grid-column: 5;
  grid-column-start: 5;
}
.column_start_6{
  -ms-grid-column: 6;
  grid-column-start: 6;
}
.column_start_7{
  -ms-grid-column: 7;
  grid-column-start: 7;

}.column_start_8{
   -ms-grid-column: 8;
   grid-column-start: 8;
 }
.column_start_9{
  -ms-grid-column: 9;
  grid-column-start: 9;
}
.column_start_10{
  -ms-grid-column: 10;
  grid-column-start: 10;
}
.column_start_11{
  -ms-grid-column: 11;
  grid-column-start: 11;
}
.column_start_12{
  -ms-grid-column: 12;
  grid-column-start: 12;
}

/**/

.column_end_1{
  -ms-grid-column-span: 1;
  grid-column-end: 1;
}

.column_end_2{
  -ms-grid-column-span: 2;
  grid-column-end: 2;
}
.column_end_3{
  -ms-grid-column-span: 3;
  grid-column-end: 3;
}
.column_end_4{
  -ms-grid-column-span: 4;
  grid-column-end: 4;
}
.column_end_5{
  -ms-grid-column-span: 5;
  grid-column-end: 5;
}
.column_end_6{
  -ms-grid-column-span: 6;
  grid-column-end: 6;
}
.column_end_7{
  -ms-grid-column-span: 7;
  grid-column-end: 7;

}.column_end_8{
   -ms-grid-column-span: 8;
   grid-column-end: 8;
 }
.column_end_9{
  -ms-grid-column-span: 9;
  grid-column-end: 9;
}
.column_end_10{
  -ms-grid-column-span: 10;
  grid-column-end: 10;
}
.column_end_11{
  -ms-grid-column-span: 11;
  grid-column-end: 11;
}
.column_end_12{
  -ms-grid-column-span: 12;
  grid-column-end: 12;
}
.column_end_13{
  -ms-grid-column-span: 13;
  grid-column-end: 13;
}

Answer 1

Flexbox没有像CSS Grid那样定义网格，但你可以使用与许多框架相同的逻辑，使用col_1/col_2等。

此示例使用Flexbox生成类似的输出

堆栈代码段

.field-items {
  display: flex;
  flex-wrap: wrap;  
}

.field-items > .entity-paragraphs-item{
  border:1px solid red;  
  box-sizing: border-box;
}

.bloc-lien-item {
  word-wrap: break-word;
 }

.supposed_to_be_above{
  color:blue;
}

/*    ----------    grid  -----------------   */
.col_1{
  width: 8.333%;
}
.col_2{
  width: 16.667%;
}
.col_3{
  width: 25%;
}

.col_6{
  width: 50%;
}

<div class="field-items">
  <div class="entity entity-paragraphs-item col_6"></div>
  <div class="entity entity-paragraphs-item paragraphs-item-bloc-lien col_3">whatever</div>
  <div class="bloc-lien-item entity entity-paragraphs-item paragraphs-item-bloc-lien col_3"></div>


  <div class="bloc-lien-item supposed_to_be_above entity entity-paragraphs-item paragraphs-item-bloc-lien col_3">that block is supposed to be above since the first row has been used . This is the behaviour on other browser than IE11</div>
</div>

---

要获取空白项目，您可以使用空元素，只需在其上使用col_*类。

可选地，可以使用例如margin创建“空”空格，虽然我发现只需插入“空白项”元素就更简单了。

需要注意的是，margin在flex项目上使用百分比不会在浏览器中呈现相同的结果，因此可能不是有效的解决方案。

堆栈代码段

.field-items {
  display: flex;
  flex-wrap: wrap;  
}

.field-items > .entity-paragraphs-item{
  border:1px solid red;  
  box-sizing: border-box;
}

.bloc-lien-item {
  word-wrap: break-word;
 }

.supposed_to_be_above{
  color:blue;
}

/*    ----------    grid  -----------------   */
.col_1{
  width: 8.333%;
}
.col_2{
  width: 16.667%;
}
.col_3{
  width: 25%;
}

.col_6{
  width: 50%;
}

<div class="field-items">
  <div class="entity entity-paragraphs-item col_6"></div>
  <div class="col_3"></div>
  <div class="entity entity-paragraphs-item paragraphs-item-bloc-lien col_3">whatever</div>

  <div class="bloc-lien-item supposed_to_be_above entity entity-paragraphs-item paragraphs-item-bloc-lien col_3">that block is supposed to be above since the first row has been used . This is the behaviour on other browser than IE11</div>
</div>