Css i Flexbox

Question

Witam na wstępie chciałbym zaznaczyć że dopiero zaczynam swoją przygodę z Html i Css.

Ostatnio postanowiłem napisać jakąś stronę taką dla ćwiczeń.

https://jsfiddle.net/Marcins321/vfkn9de7/

Powyższy kod miał stworzyć nagłówek oraz logo , logo miało zajmować lewy górny róg zaś nagłówek miał mieć z 20-30 px odstępu od loga i miał zajmować prawie całą górną część strony, ale coś poszło nie tak i logo jest na swoim miejscu ,a nagłówek jest pod logiem . Jeżeli ktoś mógłby objaśnić gdzie popełniłem błąd.

Kod css pisałem z użyciem FlexBox

Answer 1

display: flex ustawia się rodzicowi elementów w twoim przypadku to będzie div o klasie 'strona głowna' ( iklase powinieneś zapisać jako jeden ciąg znaków przykład strona_główna chyba , że było to celowe i miały być dwie osobne klasy)

Comments

tak zapisałem tak i później próbowałem wyśrodkować nagłówek, ale to też nie działa

http://prntscr.com/l45m06

---

nie jestem pewien czy o to Ci chodziło https://jsfiddle.net/vfkn9de7/18/

ustawiasz w  klasie strona rozmieszczenie diva logo i nagłówka a następnie sam tekst w klasie nagłówek rozmieszczasz na środku

---

1. nie używamy polskich znaków do nazywania id oraz class
2.  użyłeś flexboxa na dzieciach nie na rodzicu

tam gdzie masz class="strona głowna" a chcesz użyć tego jako "strona_głowna" tak nie robimy bo strona głowna nie jest tym samym co strona_głowna :)

 

poćwicz sobie flexboxa :)

https://flexboxfroggy.com/#pl

http://yoksel.github.io/flex-cheatsheet/

---

no nie chodziło mi o to ponieważ jeżeli zbadasz element i usuniesz linijkę img to zostanie czerwona plama na całości ,ale dzięki za radę .

Znalazłem sobie kurs w internecie (jedyny który mówi coś więcej niż tylko co robi d-flex oraz justify-content) i już wiem jak to zrobić ;)

---

może też użyć flex-grow:1 w nagłówku :)

---

Stop stop :D znalazłem już rozwiązanie niestety nikt kto tu pisał nie miał racji :( :(

chodziło mi o to (mniej więcej bo trzeba to jeszcze troszku dopracować)

 

body{
	background-color: lightgray;
	color: black;
}

.strona_głowna{
	display: flex;
	justify-content: center;
}

.strona_głowna div.nagłówek{
	flex:3;
	background-color: red;
}

.strona_głowna div.logo{
	flex: 1;
}

 

---

.x {
    flex-grow: 1;
}

/** to nie jest to samo co */

.x {
    flex: 1;
}

??