Вопросы Теги

CSS - гибкий макет сетки

все вышесказанное верно. Пожалуйста, будьте уверены, прежде чем это число в строке, сделав «typeot x === 'number», «другой мудрый он вернет NaN 

 var num = "fsdfsdf242342";
 typeof num => 'string';

 var num1 = "12423";
 typeof num1 => 'number';
 +num1 = > 12423`
0
задан Asiya Fatima 16 January 2019 в 00:29
поделиться

2 ответа

.block {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: flex-start;

}

.block__item {
  background: grey;
  height: 20px;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  flex-grow: 1;
  flex-shrink: 0;
}

.block__item:last-of-type {
  border-right: none; 
}
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
</div>

0
ответ дан Trouble 16 January 2019 в 00:29
поделиться

Используйте last-child / nth-child, чтобы удалить поля из последнего элемента каждой строки, и используйте flex-basis / flex-grow для установки ширины:

[110 ] 
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

0
ответ дан Temani Afif 16 January 2019 в 00:29
поделиться
Другие вопросы по тегам:

Похожие вопросы: