Исправлено количество flex-элементов в одной строке при использовании flex-wrap - PullRequest
Новая
       10

Исправлено количество flex-элементов в одной строке при использовании flex-wrap

0 голосов
/ 02 июня 2019

У меня есть следующий HTML и CSS код, который вы также можете найти в JS fiddle здесь . 

body {
  margin: 0;
}

main {
  width: 80%;
  margin-left: 10%;
  float: left;

  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: Chartreuse;
}

.image {
  width: 80%;
  height: 100px;
  margin-left: 10%;

  background-color: green;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.image img {
  width: 100%;
  height: 100%;
}



.flex-container {
 display: flex;
 flex-wrap: wrap;

 width: 80%;
 margin-left: 10%;

 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: red;
}


.flex-item{
 flex-basis: 25%;
 
 flex-grow: 1;
 flex-shrink: 1;

 padding-left: 5%;
 padding-right: 5%;

 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: blue;
}
<body>

  <main>
  
  <div class="image">
  <img src="http://placehold.it/101x101">
  </div>

  <div class="flex-container">
  
    <div class="flex-item">
    text of flex-item 1 goes into the box here.
    </div>
    
    <div class="flex-item">
    text of flex-item 2 goes into the box here.
    </div>
    
    <div class="flex-item">
    text of flex-item 3 goes into the box here.
    </div>
    
    <div class="flex-item">
    text of flex-item 4 goes into the box here.
    </div>
    
  </div>

  </main>

</body>

Как видите, код показывает веб-страницу, состоящую из .image и четырех .flex-items в пределах .flex-container ниже .image.Эти flex-элементы используются, чтобы сделать веб-страницу отзывчивой.Поэтому я применил к нему свойство .flex-wrap.

Теперь моя проблема заключается в том, что, когда я уменьшу размер от настольного компьютера до мобильного устройства, последний flex-item будет полностью ниже трех других flex items.
Однако я хочу добиться, чтобы всегда по крайней мере 2 элемента находились в одной строке , поэтому в случае выше, когда последний элемент поднимается на уровень ниже, третий элемент также должен идти.

Что мне нужно изменить в моем коде, чтобы добиться этого?

1 Ответ

0 голосов
/ 02 июня 2019

Применительно к вопросу здесь решение состоит в том, чтобы разделить четыре элемента на два sub-containers, где каждый контейнер состоит из двух элементов, и добавить min-width: 150px; к основному .flex-container. Код также можно найти в JS fiddle здесь . 

body {
  margin: 0;
}

main {
  width: 80%;
  margin-left: 10%;
  float: left;

  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: Chartreuse;
}

.image {
  width: 80%;
  height: 100px;
  margin-left: 10%;

  background-color: green;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.image img {
  width: 100%;
  height: 100%;
}



.flex-container {
 display: flex;
 flex-wrap: wrap;

 width: 80%;
 margin-left: 10%;

 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: red;
}


.sub-container {
 display: flex;
 flex-wrap: wrap;

 flex-basis: 50%;
 flex-grow: 1;
 flex-shrink: 1;
 min-width: 150px; /* Neccessary to break the subcontainers in two lines */

 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: red;
}


.flex-item {
 flex-basis: 50%;
 flex-grow: 1;
 flex-shrink: 1;

 padding-left: 5%;
 padding-right: 5%;

 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: blue;
}
<body>

  <main>
  
  <div class="image">
  <img src="http://placehold.it/101x101">
  </div>

	<div class="flex-container">
		
    <div class="sub-container">
    <div class="flex-item">text of flex-item 1 goes into the box here.
    </div>
    <div class="flex-item">text of flex-item 2 goes into the box here.
    </div>
    </div>
		
    <div class="sub-container">
    <div class="flex-item">text of flex-item 3 goes into the box here.
    </div>
    <div class="flex-item">text of flex-item 4 goes into the box here.
    </div>
    </div>
		
  </div>

  </main>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...