Как позволить элементам с плавающей точкой в ​​среднем разбить пустую область? - PullRequest
Новая
       23

Как позволить элементам с плавающей точкой в ​​среднем разбить пустую область?

1 голос
/ 12 июня 2019

Пожалуйста, запустите эту демонстрацию: 

.app {
  background:pink;
  width: 90vw;
  overflow: hidden;
}
.app__item {
  background: lightblue;
  width: 200px;
  float :left;
  margin:5px;
  height: 40px;
}
.app__item:last-child {
  float: right;
}
.app__item--size2 {
  height: 90px;
}
<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

Пожалуйста, обратите внимание на красный цвет текста, который я хочу:

enter image description here

Как разрешить плавающим элементам разбить пустую область в среднем?

В этом гифке указано, что я хочу, а также причина, по которой я использую разметку с плавающей точкой.

enter image description here

Если использовать flex, результат будет 

.app {
  background:pink;
  width: 80vw;
  display: flex;
  flex-flow: row wrap;
}
.app__item,
.app__item_wrapper {
    margin:5px;    
  width: 200px;
  flex: 0 0 auto;
}
.app__item {
  background: lightblue;
  height: 40px;
}
.app__item_wrapper {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.app__item--size2 {
  height: 90px;
}
.app__item--inner {
  margin:0;
  flex: 0 0 auto;
}
<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class=" app__item_wrapper app__item--size2">
    <div class="app__item app__item--inner">2</div>
    <div class="app__item app__item--inner">3</div>
  </div>
  <div class=" app__item_wrapper app__item--size2">
    <div class="app__item app__item--inner">4</div>
    <div class="app__item app__item--inner">5</div>
  </div>

  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

И минус в том, что он не будет работать хорошо, когда меняется область просмотра. Смотрите это:

enter image description here

и это мошенничество:

enter image description here

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Если я правильно понимаю, вы хотите, чтобы ячейки справа от «ячейки 1» растягивались, чтобы заполнить развертывающееся горизонтальное пространство вмещающего элемента div (с розовым фоном).

Вы можете использовать CSS Grid для достижения этой цели, как показано ниже: 

.app {
  background:pink;
  width: 90vw;
  padding:5px;
  
  display:grid;
  
  /* Cause first column with to be 200px, remaining two columns
  to scale to fit remaining width */
  grid-template-columns: 200px repeat(2, 1fr);
  
  /* Set spacing between cells */
  grid-gap:10px;
}
.app__item {
  
  background: lightblue;
  width: 100%;
  height: 40px;
} 
.app__item--size2 {
  /* Cause top left cell to occupy two rows */
  grid-row: 1 / 3;
  height:100%;
}
<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>
0 голосов
/ 12 июня 2019

Спасибо @Dacre Denny за вдохновение. Наконец-то я понял. 

.app {
  background:pink;
  width: 90vw;
  padding:5px;
  
  display:grid;
  grid-template-columns: repeat(auto-fit,200px);
  justify-content:space-evenly;
  grid-gap: 5px;
}
.app__item {  
  background: lightblue;
  width: 200px;
  height: 40px;
} 
.app__item--size2 {
  /* Cause top left cell to occupy two rows */
  grid-row: 1 / 3;
  height:100%;
}
.app__item:last-child {
  grid-column-end: -1
}
<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

Смотрите этот рисунок, когда видовой экран меняется.

enter image description here

...