Как сделать тоже самое на flex?

Question

<!DOCTYPE html>
<html>

<head>
  <style>
    .grid-container {
      display: grid;
      gap: 5px;
      grid-template-columns: 2fr 3fr 1fr;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .grid-container2 {
      display: grid;
      gap: 5px;
      grid-template-columns: 5fr 1fr;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>

<body>

  <h1>The gap Property</h1>

  <p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

  </div>
  <div class="grid-container2">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>

  </div>

</body>

</html>

Answer 1

<!DOCTYPE html>
<html>

<head>
  <style>
    .flex-container {
      display: flex;
      gap: 5px;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .flex-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
    
    .first {
      flex-basis: calc(100% / 6 * 2);
    }
    
    .second {
      flex-basis: calc(100% / 6 * 3);
    }
    
    .third {
      flex-basis: calc(100% / 6 * 1);
    }
    
    .fourth {
      flex-basis: calc(100% / 6 * 5 - 10px);
    }
    
    .fifth {
      flex-basis: calc(100% / 6 * 1 - 10px);
    }
  </style>
</head>

<body>

  <h1>The gap Property</h1>

  <p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>

  <div class="flex-container">
    <div class="flex-item first">1</div>
    <div class="flex-item second">2</div>
    <div class="flex-item third">3</div>
  </div>
  <div class="flex-container">
    <div class="flex-item fourth">1</div>
    <div class="flex-item fifth">2</div>
  </div>

</body>

</html>

БЛОГ НА HUSL

Как сделать тоже самое на flex?

Ответы (1 шт):