layout w flexbox

0

Witam wszystkich forumowiczów :)
Uczę się pisania stronek od niedawna ( niecałe 2 miesiące) i dotarłem do zagadnienia flexbox. Bardzo podoba mi się sposób działania tej funkcji, jednak nie potrafię jej ogarnąć. Chciałbym stworzyć layout z sześciu kolumn, jedna duża po lewej stronie ( wypełniająca połowę strony ). Po prawej stronie 5 kolumn jedna pod drugą, a gdy zostanie ona wyświetlona na telefonie chciałbym żeby wszystkie kolumny były też jedna pod drugą. Dziękuje za dobre rady :)
Zamieszczam kod moich zmagań ;)

 <style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 .left-contanier {
   position: fixed;
    width: 100%;
    height: 100%;
    display: flex;

}
.right-contanier {
  position: fixed;
  display: flex;
  width: 100%;
  height: 50%;
  flex-direction: column;
}
.col-1 {
    width: 50%;
    height: 100%;
    background: yellow;
    display: flex;
}

.col-2 {
    width: 50%;
    height: 20%;
    background: green;
    display: flex;
}

.col-3 {
    width: 50%;
    height: 20%;
    background: purple;
    display: flex;
}

.col-4 {
    width: 50%;
    height: 20%;
    background: orange;
    display: flex;
}

.col-5 {
    width: 50%;
    height: 20%;
    background: pink;
    display: flex;
}

.col-6 {
    width: 50%;
    height: 20%;
    background: blue;
    display: flex;
}
</style>

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

<head>
    <meta charset='UTF-8' />
    <title>Janusz Cssu</title>
    <link rel='stylesheet' href='styles.css' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
</head>

<body>
<div class="left-contanier">
    <div class="col-1"></div>
</div>
<div class="right-contanier">
    <div class="col-2"></div>
    <div class="col-3"></div>
    <div class="col-4"></div>
    <div class="col-5"></div>
    <div class="col-6"></div>
</div>
</body>

</html>
0

Chodzi Ci o coś takiego:

<style>
    .container {
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    .left-container {
        width: 50%;
    }

    .right-container {
        display: flex;
        flex-direction: column;
        width: 50%;
    }

    .col-1 {
        height: 100%;
        background: yellow;
    }

    .col-2 {
        height: 20%;
        background: green;
    }

    .col-3 {
        height: 20%;
        background: purple;
    }

    .col-4 {
        height: 20%;
        background: orange;
    }

    .col-5 {
        height: 20%;
        background: pink;
    }

    .col-6 {
        height: 20%;
        background: blue;
    }
</style>

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

<head>
    <meta charset='UTF-8'/>
    <title>Janusz Cssu</title>
    <link rel='stylesheet' href='styles.css'/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
</head>

<body>
    <div class="container">

        <div class="left-container">
            <div class="col-1"></div>
        </div>

        <div class="right-container">
            <div class="col-2"></div>
            <div class="col-3"></div>
            <div class="col-4"></div>
            <div class="col-5"></div>
            <div class="col-6"></div>
        </div>

    </div>
</body>

</html>
0

Dziękuje za odpowiedz, ale po wklejeniu Twojego kodu niestety nic mi się nie wyświetla :/ może to wina mojej przeglądarki, sam już nie wiem ?

0

Z jakiej przęglądarki korzystasz? Kod testowany na IE 11, Firefox 51 oraz Chrome 56. We wszystkich trzech działa.

0

Wyświetla się :) dzięki. Jeszcze tylko żeby ta kolumna po prawej jak się wejdzie na wersje mobilną, była pod spodem tego żółtego kontenera :)

0

Jeżeli chodzi o wersję mobilną to zobacz sobie Media Query.

0

Tak się dzisiaj zaplątałem przez tego fexboksa, że zupełnie zapomniałem o media queries :) Dzięki za Pomoc :)

0

Witam ponownie :)
Udało mi się zrobić layout responsywny, ale mam taką ciekawa zagwozdkę. Mianowicie gdy wstawiłem <style> do html to stronka działa, a gdy to samo przekopiuje do arkusza css, wtedy nic mi się nie wyświetla. @media natomiast działają w arkuszu css, wiec nie mam pojęcia o co chodzi :) Jakieś sugestie dla nieogarniętego Świeżaka ;) (kasuje style z html i wklejam do css, stronka nie działa. Kasuje kod z css i zostawiając same @media stronka działa)

HTML

 <style>
    .container {
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    .left-container {
        width: 50%;
    }

    .right-container {
        display: flex;
        flex-direction: column;
        width: 50%;
    }

    .col-1 {
        height: 100%;
        background: yellow;
    }

    .col-2 {
        height: 20%;
        background: green;
    }

    .col-3 {
        height: 20%;
        background: purple;
    }

    .col-4 {
        height: 20%;
        background: orange;
    }

    .col-5 {
        height: 20%;
        background: pink;
    }

    .col-6 {
        height: 20%;
        background: blue;
    }
</style>

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

<head>
    <meta charset='UTF-8'/>
    <title>bArt</title>
    <link rel='stylesheet' href='styles.css'/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
</head>

<body>
    <div class="container">

        <div class="left-container">
            <div class="col-1"></div>
        </div>

        <div class="right-container">
            <div class="col-2"></div>
            <div class="col-3"></div>
            <div class="col-4"></div>
            <div class="col-5"></div>
            <div class="col-6"></div>
        </div>

    </div>
</body>

</html>

CSS

 @media only screen and (max-width: 400px) {
    .container  {
      flex-wrap: wrap;
    }
    .left-container {
      width: 100%;
    }
    .right-container {
      width: 100%;
      height: auto;
    }
     }
0

Sam to już sobie wykombinowałem :)
Wystarczyło dopisać w css takie coś ;) i śmiga

 html, body {
  height: 100%
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1