Question

我有两个关于flexbox的问题，但找不到答案。

我想创建四个框，它们的宽度和高度都相同，而无需使用视口。例如：我创建了一个宽度为50％的盒子，并且高度必须等于宽度。所有其他框都具有相同的属性。
如果我有那些框，我想将div的位置设置在这些正方形的其中之一内，该正方形的高度为20％，且整个框的宽度为20％。如何将高度设置为20％，并确保盒子不伸出？

到目前为止，我的代码：

.flex-container {
  float: none;
  width: 50%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;  
   -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-item { 
  width: 50%;
  color: white;
}

.flex1 {
  background-color: green;
   float: left;
}

.flex2 {
  background-color: red;
  float: right;
}

.flex3 {
  background-color: purple;
   float: left;
}

.flex4 {
  background-color: orange;
  float: right;
}

.inlineBox {
  width: 100%;
  height: 20%;
  background-color: yellow;
}

<ul class="flex-container">
  <li class="flex-item flex1">this boxes that I created here all need to have the same height and width. They need to be responsive and dont use a vieuwport</li>
  <li class="flex-item flex2">2</li>
  <li class="flex-item flex3">3</li>
  <li class="flex-item flex4">4</li>
  
  
</ul>

<br>
<br>
<br>


these yellow box need to take a width of 100% and a height of 20% inside the flex box<br>


<ul class="flex-container">
  <li class="flex-item flex1">
    <div class="inlineBox"> </div>
    <div class="inlineBox"> </div>
    <div class="inlineBox"> </div>
  
  </li>
  <li class="flex-item flex2">2</li>
  <li class="flex-item flex3">3</li>
  <li class="flex-item flex4">4</li>
  
  
</ul>

Answer 1

答案是否定的。在flexbox规范中提供了原因： https://www.w3.org/TR/css-flexbox-1/#flex-lines

您现在可以使用display：grid：

https://codepen.io/pgurav/pen/eYpeOEp

尽管网格本身不是flexbox，但其行为与flexbox容器非常相似，并且网格内的项目可以是flex。

在您需要响应式网格的情况下，网格布局也非常方便。也就是说，如果您希望网格每行具有不同的列数，则只需更改grid-template-columns：

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

以此类推...

您可以将其与媒体查询混合使用，并根据页面大小进行更改。

遗憾的是，浏览器（开箱即用）仍然不支持容器查询/元素查询，以使其能够根据容器大小（而不是页面大小）更改列数，从而很好地工作非常适合与可重用的Web组件一起使用。

有关网格布局的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

浏览器对Grid Layout的支持：

https://caniuse.com/#feat=css-grid

Answer 2

html代码：

<ul class="flex-container">
    <li class="flex-item flex1">
        <span>this boxes that I created here all need to have the same height and width. They need to be responsive and dont use a vieuwport</span>
    </li>
    <li class="flex-item flex2"></li>
    <li class="flex-item flex3"></li>
    <li class="flex-item flex4"></li>



  </ul>

  <br>
  <br>
  <br>


  these yellow box need to take a width of 100% and a height of 20% inside the flex box<br>


  <ul class="flex-container">
    <li class="flex-item flex1">
        <div class="item-wrap">

            <div class="inlineBox"> </div>
            <div class="inlineBox"> </div>
            <div class="inlineBox"> </div>
        </div>

    </li>
    <li class="flex-item flex2"></li>
    <li class="flex-item flex3"></li>
    <li class="flex-item flex4"></li>


  </ul>

css代码：

.flex-container {
    width: 50%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;  
     -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .flex-item { 
      position: relative;
    width: 50%;
    padding-top: 50%;
    color: white;
  }
  .flex-item > span {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }

  .flex1 {
    background-color: green;
     float: left;
  }

  .flex2 {
    background-color: red;
    float: right;
  }

  .flex3 {
    background-color: purple;
     float: left;
  }

  .flex4 {
    background-color: orange;
    float: right;
  }

  .inlineBox {
    width: 100%;
    padding-top: 20%;
    background-color: yellow;
  }
  .item-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }

宽度和高度相等的flexbox

2 个答案: