CSS - гибкая верстка

Question

У меня есть простой макет с четырьмя блоками подряд.

при 500px Я хочу изменить макет на 2 строки с блоками 50% ширины.

Каксделать это с помощью flex.

*{
  font-family: sans-serif;
}

ul{
  border: 1px solid red;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
}

li{
  /*flex-grow: 1;*/
  width: 25%;
  height: 100px;
  background-color: red;
  margin: 8px;
  list-style: none;
  color: white;
  padding: 10px;
}

@media (max-width: 500px){
  ul{
    /*flex-wrap: wrap;*/
  }
  li{
    background: yellow;
    width: 50%;
  }
}

<ul>
  <li class="one">One</li>
  <li class="two">Two</li>
  <li class="three">Three</li>
  <li class="three">Four</li>
</ul>

Answer 1

Установите flex: 1 25%; в обычном режиме и flex: 2 50%; в 500px виде порта.Вы можете проверить мой код ниже:

*{
  font-family: sans-serif;
}

ul{
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

li{
  flex: 1 25%;
  height: 100px;
  background-color: red;
  list-style: none;
  color: white;
  padding: 10px;
  border: 10px solid #fff;
  box-sizing: border-box;
}

@media (max-width: 500px){
  li{
    background: yellow;
    flex: 2 50%;
  }
}

<ul>
  <li class="one">One</li>
  <li class="two">Two</li>
  <li class="three">Three</li>
  <li class="three">Four</li>
</ul>

Answer 2

Это работает, попробуйте это

*{
  font-family: sans-serif;
}

ul{
  border: 1px solid red;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
}

li{
  /*flex-grow: 1;*/
  width: 100%;
  height: 100px;
  background-color: red;
  margin: 8px;
  list-style: none;
  color: white;
  padding: 10px;
}

@media screen and (max-width: 500px){
  ul{
    display: flex;
    flex-flow: wrap;
  }

  li{
    background: yellow;
    flex:  42%;
    padding: 2%;
  }
}   




    <ul>
      <li class="one">One</li>
      <li class="two">Two</li>
      <li class="three">Three</li>
      <li class="three">Four</li>
    </ul>

Answer 3

То, что вам не хватает, это flex-basis.

У вас также есть некоторые отступы и поля, которые могут немного испортить макет.Я бы предложил установить их на внутреннего потомка li.

*{
  font-family: sans-serif;
}

ul{
  border: 1px solid red;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
}

li{
  /*flex-grow: 1;*/
  width: 25%;
  height: 100px;
  background-color: red;
  list-style: none;
  color: white;
}

@media (max-width: 500px){
  ul{
    flex-wrap: wrap;
  }
  li{
    background: yellow;
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }
}