flex.html - master - Da11oS/css_styles_examples

flex.html
119 строк3 KB
Da11oS
init
09 июл 2025, 22:31
09 июл 2025, 22:31f3aeeea
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #bdc3c7;
      padding: 10px;
      gap: 10px;
    }

    .flex-item {
      background-color: #2980b9;
      color: white;
      padding: 20px;
      text-align: center;
      flex: 1;
    }

    /* Дополнительные примеры */
    .flex-direction-row {
      display: flex;
      flex-direction: row;
      gap: 10px;
      background-color: #ecf0f1;
    }

    .flex-direction-column {
      display: flex;
      flex-direction: column;
      gap: 10px;
      background-color: #ecf0f1;
    }

    .flex-wrap-example {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      background-color: #ecf0f1;
    }

    .flex-flow-example {
      display: flex;
      flex-flow: row wrap;
      gap: 10px;
      background-color: #ecf0f1;
    }

    .align-items-center {
      display: flex;
      align-items: center;
      gap: 10px;
      background-color: #ecf0f1;
    }

    .align-content-space-around {
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      gap: 10px;
      background-color: #ecf0f1;
    }
  </style>
</head>
<body>
  <h2>Flexbox Примеры</h2>

  <!-- Flex Direction -->
  <div class="flex-direction-row">
    <div class="flex-item">Row 1</div>
    <div class="flex-item">Row 2</div>
    <div class="flex-item">Row 3</div>
  </div>

  <div class="flex-direction-column">
    <div class="flex-item">Column 1</div>
    <div class="flex-item">Column 2</div>
    <div class="flex-item">Column 3</div>
  </div>

  <!-- Flex Wrap -->
  <div class="flex-wrap-example">
    <div class="flex-item">Wrap 1</div>
    <div class="flex-item">Wrap 2</div>
    <div class="flex-item">Wrap 3</div>
    <div class="flex-item">Wrap 4</div>
    <div class="flex-item">Wrap 5</div>
  </div>

  <!-- Flex Flow -->
  <div class="flex-flow-example">
    <div class="flex-item">Flow 1</div>
    <div class="flex-item">Flow 2</div>
    <div class="flex-item">Flow 3</div>
    <div class="flex-item">Flow 4</div>
    <div class="flex-item">Flow 5</div>
  </div>

  <!-- Align Items -->
  <div class="align-items-center">
    <div class="flex-item">Align 1</div>
    <div class="flex-item">Align 2</div>
    <div class="flex-item">Align 3</div>
  </div>

  <!-- Align Content -->
  <div class="align-content-space-around">
    <div class="flex-item">Content 1</div>
    <div class="flex-item">Content 2</div>
    <div class="flex-item">Content 3</div>
    <div class="flex-item">Content 4</div>
    <div class="flex-item">Content 5</div>
  </div>
</body>
</html>