等宽高flexbox

Question

I've two question's about flexboxes but can't find the answer to this.

1. I want to create 4 boxes that have all the same width and the same height without using the viewport. for example: I create one box with a 50% width and the height needs to be equal to the width. All the other boxes get the same properties.

2. If I have those boxes I would like to set div's inside one of those square's, one that takes a height of 20% and the whole width of that box. how can I set the height to 20% and make sure the box doesn't extend?

my code so far:

 .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

The answer is NO. The reason is provided in the flexbox specification: https://www.w3.org/TR/css-flexbox-1/#flex-lines

You can accomplish that now with display: grid:

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

Although the grid itself is not flexbox, it behaves very similar to a flexbox container, and the items inside the grid can be flex.

The grid layout is also very handy in the case you want responsive grids. That is, if you want the grid to have a different number of columns per row you can then just change 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

and so on...

You can mix it with media queries and change according to the size of the page.

Sadly there is still no support for container queries / element queries in the browsers (out of the box) to make it work well with changing the number of columns according to the container size, not to the page size (this would be great to use with reusable webcomponents).

More information about the grid layout:

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

Support of the Grid Layout accross browsers:

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

Answer 2

html code:

<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 code:

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