css - 是否可以使用 CSS flexbox 固定列数、开始和结束位置？

Question

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

css display grid and IE11

使用每个元素类 column_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 创建“空白”空间，但我发现放入“空白项”元素更简单。

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

堆栈片段

.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>