<span> zachowuje się jak element blokowy

Question

Mam kod jak poniżej. Nie rozumiem dlaczego tekst umieszczony w <span> wyświetla się po prawej stronie tekstu zamiast pod spodem.

Czy ktoś wie dlaczego?

HTML

<div class="intro">
	
	<div class="half"> To tekst układający się normalnie <span class="purple">a to zamiast dalej pod tekstem to pojawia się na prawo od tekstu</span>.
		
	</div>
	
	<div class="half"><img src="akor.png">
	</div>

</div>

CSS

.intro
{
	width:1000px;
	height: 400px;
	display:flex;
	margin-right:auto;
	margin-left:auto;
}


.half
{

	display:flex;
	align-items:center;
	text-align:center;
	height: 100%;
	width:50%;
	font-size:2rem;

}

.purple
{
	color:green;
}

 

Answer 1

Tak się zachowuje układ dla flexbox. Ustawia elementy w jednej linii.

.half
{
    display:flex;
    ...
}

 

Comments

OK ale <span> również? Wydawało mi się że flexbox ustawia domyślnie elementy blokowe w lini.
W tym przypadku nawet jeżeli zamiast <span> wykorzystam <a> to tez traktuje to jako element blokowy a nie link…

czy to znaczy ze w przypadku flexbox nie mogę wstawiać w tekście linków?

---

"Flexbox to (oprócz opcjonalnego zawijania) koncepcja układu jednokierunkowego. Pomyśl o elementach elastycznych jako układających się głównie w poziome rzędy lub pionowe kolumny."

Nie ma znaczenia co jest w środku pojemnika elastycznego (flexbox)

---

W tym przypadku nawet jeżeli zamiast <span> wykorzystam <a> to tez traktuje to jako element blokowy a nie link…

czy to znaczy ze w przypadku flexbox nie mogę wstawiać w tekście linków?

Na marginesie: gdy myślisz o użyciu danego znacznika HTML, powinieneś brać pod uwagę co sobą reprezentuje pod względem semantycznym, a nie to jak on się domyślnie układa na stronie, bo to możesz zmienić w CSS. HTML i CSS to są osobne warstwy strony i dobrze jest w ten sposób do nich podchodzić.

Answer 2

Zwróć uwagę na fakt, że inne "parametry" flex przyjmują swoje domyślne ustawienia i tak dla

display: flex;

jest

flex-direction: row;

 

dopisz do  [ on-line ]

.half
{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 50%;
    font-size: 2rem; 
}