одинаковая ширина и высота flexbox

Question

У меня два вопроса о флексбоксах, но я не могу найти ответ на этот вопрос.

1. Я хочу создать 4 поля одинаковой ширины и высоты без использования области просмотра. например: я создаю один блок шириной 50%, а высота должна быть равна ширине. Все остальные поля получают одинаковые свойства.

2. Если у меня есть эти поля, я бы хотел установить div внутри одного из этих квадратов, который принимает высоту 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 -линии

Вы можете выполнить sh, что теперь с отображением: grid:

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

Хотя сама сетка не является flexbox, она ведет себя очень похоже на контейнер flexbox, и элементы внутри сетки могут быть гибкими.

Схема сетки также очень удобна в случае, если вы хотите адаптивные сетки. То есть, если вы хотите, чтобы сетка имела различное количество столбцов в строке, вы можете просто изменить 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

и т. Д. *

Вы Можно смешивать его с медиа-запросами и изменять в соответствии с размером страницы.

К сожалению, в браузерах (из коробки) до сих пор не поддерживается контейнерные запросы / запросы элементов, чтобы он хорошо работал с изменениями. количество столбцов в зависимости от размера контейнера, а не от размера страницы (это было бы хорошо для использования с повторно используемыми веб-компонентами).

Дополнительная информация о макете сетки:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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;
  }