• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Flexbox - rozmieszczenie elementów

VPS Starter Arubacloud
0 głosów
685 wizyt
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ź

0 głosów
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 

Podobne pytania

0 głosów
1 odpowiedź 142 wizyt
0 głosów
2 odpowiedzi 1,923 wizyt
pytanie zadane 14 listopada 2019 w HTML i CSS przez Michał_Warmuz Mądrala (5,830 p.)
0 głosów
2 odpowiedzi 171 wizyt
pytanie zadane 29 sierpnia 2017 w HTML i CSS przez jjanek Użytkownik (630 p.)

92,768 zapytań

141,691 odpowiedzi

320,508 komentarzy

62,106 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...