Завдання на знання властивостей елементів flexbox

Raisa Kravets -

 КАРТКИ-ЗАВДАННЯ (FLEXBOX)



Картка 1 — order

Зроби так, щоб:
• блок 3 був першим
• блок 1 був другим
• блок 2 був третім 

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
  
.container {
  display: flex;
  width: 600px;
  height: 200px;
}

.item {
  padding: 20px;
}

Картка 2 — flex-grow

Зроби так, щоб блок 2 був у 2 рази ширший, ніж інші.

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
  
.container {
  display: flex;
  width: 600px;
}

.item {
  padding: 20px;
}

Картка 3 — flex-shrink

Заборони блоку 3 стискатися, якщо місця не вистачає.

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
  
.container {
  display: flex;
  width: 600px;
}

.item {
  width: 300px;
}

Картка 4 — flex-basis

Зроби так, щоб:
• блок 2 мав початкову ширину 300px
• інші блоки — 100px 

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
  
.container {
  display: flex;
  width: 600px;
}

.item {
  padding: 20px;
}

Картка 5 — flex-basis vs width

Якою буде ширина блоку 1?

.container {
  display: flex;
}

.item1 {
  width: 150px;
  flex-basis: 250px;
}

Картка 6 — align-self

Зроби так, щоб:
• усі блоки були по центру по вертикалі
• блок 1 був у верхній частині контейнера 

.container {
  display: flex;
  height: 200px;
}

Картка 7 — комбінована

Зроби так, щоб:
• блок 2 був першим
• блок 3 був найбільшим
• блок 1 не стискався
• блок 2 був внизу контейнера 

.container {
  display: flex;
  height: 200px;
}

Картка 8 — тест

Що буде важливішим у flex-контейнері?

Tags:
Нові Старіші