Flexbox nie działa z obrazkiem

Question

Witam

Właśnie uczę się flexbox'a i mam problem, a mianowicie nie działa właściwość justify-content - nic się nie dzieje.

Chciałbym aby napis "Your company name" znajdujący się w header był na środku obok obrazka.

 

#container
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


.header 
{
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content:center;
	
	
	
}

.companyname
{
	flex: 2;
	
}



.header img
{
	
	width: 300px;
	height: 350px;
}

<div id="container" > 

	<div class="header">
	<span class="companyname"> Your Company Name </span>
	<img src="Logo.jpg"> 
	
	
	</div>

 

Answer 1

Zrobiłem to starając się najprostszym sposobem,

do tego wyśrodkowując w pionie tytuł do obrazka:

https://codepen.io/frostify/pen/JjdBEdO

Comments

Mógłbyś tak łopatologicznie wyjaśnić dlaczego obrazek i h1 umieściłeś w divie? I dlaczego ustawiłeś header i tego diva na display:flex.

---

Masz rację :D

Można to zrobić prościej,

div jest w tym przypadku zbędny.

Potrzebny by był dla bardziej skomplikowanego ułożenie, które chcielibyśmy wyśrodkować wewnątrz headera.

Jakby nie było, zobacz poprawioną wersję pod tym samym linkiem.

https://codepen.io/frostify/pen/JjdBEdO

Nasz header domyślnie zajmuje całą szerokość strony.

Dany kod:

header {
display: flex;
justify-content: center;
align-items: center
}

Wyśrodkowuje wszystkie elementy wewnątrz headera w poziomie i w pionie układając je obok siebie.

Answer 2

Usuń to:

.companyname
{
    flex: 2;
     
}
 

I po sprawie. 

 

I chyba w złym dziale to dodałeś.

Comments

na pewno w złym dziale :)