Stylowanie tekstu i grafik w flexbox

0 
<!DOCTYPE html>
<html lang="pl">

<head>
   <meta charset="UTF-8">
   <title>Nawigacja</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>
   <header></header>
   <main>
      <div class="left">
         <p>LEWY</p>
      </div>
      <div class="right">
         <p>PRAWY</p>
      </div>
   </main>
   <footer></footer>
</body></html>

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-size: 42px;

}

body {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   background-color: lightcoral;
   min-height: 100vh;

}

header {
   background-color: antiquewhite;
   flex-basis: 20vh;
}

main {
   background-color: blue;
   flex-grow: 1;
   display: flex;
}

footer {
   background-color: orange;
   flex-basis: 10vh;
}

.left {
   background-color: silver;
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.right {
   background-color: dimgray;
   flex-basis: 30%;
   position: relative;
}

.right p {
   position: absolute;
   left: 50%;
   top: 50%;

}

Prosty layout strony zrobiony za pomocą flexboxa.
Jaki jest najlepszy sposób na stylizowanie, wyśrodkowanie tekstu, ikon, grafik wewnątrz takiego layoutu?
W lewej klasie użyłem ponownie flexboxa. W prawej klasie position.

0

Trochę dziki ten Layout :P Możesz zagnieżdżać Flexbox-y albo używać Flexboxa w połączniu z Gridem no i oczywiście zmieniając wartości właściwości "position" dla div-ów w których masz ikony czy grafiki. "wyśrodkowanie tekstu"? - po prostu "text-align: center;". Jak chcesz żeby jakiś div był po środku innego to np. "margin: 0 auto;" Musisz sprecyzować pytanie, co chcesz dokładnie zrobić bo zakładając, że znasz flexboxa i wiesz jak używać position to powinneś sobie poradzić.

0

Dopiero się uczę flexboxa i position.
Napisałeś, że ten layout jest dziki. Poprawisz go? To by mnie sporo nauczyło.

0

Polecam ci poszukać materiałów na YouTube. Jest naprawdę dużo świetnych tutoriali, nawet po polsku. Owszem eksperymentowanie i uczenie się na własnych błędach jest dobre ale dopiero od pewnego poziomu. Na początku nie ma co błądzić po omacku. Najpierw powinneś przerobić sobie jakiś kurs z podstaw HTML i CSS, nauczyć się czym jest responsywność - żeby móc od początku projektować wg. podejścia Mobile First a później oglądnąć film o Gridzie czy Flexboxie. Następnym krokiem dobrze by było obejrzeć pare filmików pokazujączych tzw. "Real Live Project" czyli budowanie prawdziwej strony od początku do końca. Po przerobieniu kilku takich projektów będziesz mniej więcej wiedział jak zrobić przyzwoity navbar, w jaki sposób pozycjonować kontent itd. Jak już będziesz umiał robić proste strony to naucz się SCSS to znacznie ułatwi ci pracę (pisząc w SCSS polecam używać roszerzenia "Live Sass Compiler jeżeli używasz edytora VSCode, który bardzo polecam).

Jak potrzebujesz gotowego layout-u to googluj "Free Website Templates". Jak nie będziesz w stanie znaleźć dobrych materiałów do nauki to daj znać.

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