Блог

Главная - Вопросы по программированию - Разница между сокращенными свойствами flex и flex-basis

Разница между сокращенными свойствами flex и flex-basis

#css #flexbox

#css #flexbox

Вопрос:

Я вижу, что с элементами HTML при использовании and происходят две разные вещи flex flex-basis . Чем второй приведенный ниже пример с использованием flex-basis amp; flex отличается от первого примера с использованием just flex ?

 .row {
  display: flex;
  flex-flow: row wrap;
  flex: 1 1 100%; //Three values for flex: flex-grow | flex-shrink | flex-basis
}

против

 .col {
 display: flex;
 flex-direction: column;
 flex-basis: 100%;
 flex: 1;
}

Ответ №1:

Потому что в вашем последнем примере flex будет переопределено flex-basis , и, следовательно flex-basis , будет переопределено

 const row = document.querySelector('.row'),
  col = document.querySelector('.col')


console.log(`row: ${window.getComputedStyle(row).getPropertyValue('flex-basis')}`)
console.log(`col: ${window.getComputedStyle(col).getPropertyValue('flex-basis')}`) 
 section:first-child {
  display: flex;
  flex-flow: row wrap;
}

section:last-child {
  display: flex;
  flex-direction: column;
}

.row {
  flex: 1 1 100%;
}

.col {
  flex-basis: 100%;
  /*this will be flex-grow:1 flex-shrink: 0 flex-basis: 0% */
  flex: 1;
} 
 <section>
  <div class="row">row</div>
</section>

<section>
  <div class="col">col</div>
</section>