Flexbox - rozmieszczenie elementów

pytanie zadane 16 sierpnia 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)

W jaki sposób mogę aside umieścić w prawej stronie czyli obok elementów 1 2 3 4 ?

 <style>
    header {
      display: flex;
      flex-direction: column;
      background-color: red;
      flex-basis: 300px;
      height: 100px;




    }

    section {
      background-color: #ddd;
      width: 100%;
      height: 100vh;
      flex-direction: row;
      font-family: sans-serif;
      color: white;
      font-size: 70px;
      display: flex;
      align-items: CENTER;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;


    }

    aside {

      display: flex;
      background-color: salmon;
      flex-direction: row;
      height: 50px;
      justify-content: flex-end;
      align-content: flex-end;
      align-items: CENTER;
      flex-wrap: wrap;


    }

    .f1,
    .f2 {
      margin-bottom: 0;
    }

    div {
      height: 300px;
      flex-basis: 450px;
      margin: 50px;

    }

    .f1 {
      background-color: darkcyan;

    }

    .f2 {
      background-color: darkred;


    }

    .f3 {
      background-color: darkolivegreen
    }

    .f4 {
      background-color: royalblue;
    }
  </style>


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Start</title>
   

<body>
  <header></header>
  <section>
    <div class="f1">1</div>
    <div class="f2">2</div>
    <div class="f3">3</div>
    <div class="f4">4</div>
  </section>
  <aside></aside>
</body>

</html>

1 odpowiedź

odpowiedź 16 sierpnia 2019 przez Tnifey Pasjonat (24,190 p.)
wybrane 16 sierpnia 2019 przez Radek Koniarski

Najlepsza

flexbox jest raczej do zastosowań 1D niż 2D więc najprostszy sposób to upakowanie section i aside w jeden element nazwijmy go container który sam jest display: flex; wtedy section i aside będą na tej samej wysokości :P

https://codepen.io/Tnifey/pen/rNBLeNp?editors=0100

albo użyj css grid to takiego ułożenia elementów bo do tego służy :P