• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Flexbox - nawigacja nie zajmuje 100% swojej szerokości

Object Storage Arubacloud
0 głosów
164 wizyt
pytanie zadane 10 stycznia 2019 w HTML i CSS przez Uzytkowniczka Nowicjusz (220 p.)
zamknięte 10 stycznia 2019 przez Uzytkowniczka

Witam,
Tworzę header strony z wykorzystaniem flexbox i natknełam się na pewien problem.
Nadałam całemu headerowi display:flex i flex-direction:column. Nawigacji(ul) również display:flex. W konsoli zauważyłam, że nawigacja nie zajmuje 100% swojej szerokości. Poniżej zamieszczam screen i fragment kodu. Będę wdzięczna jeśli ktoś wytłumaczy mi gdzie popełniłam błąd.
Pozdrawiam

 

	<header class="header">
   		<h1 class="header__title">the time is<span class="header__title-word">now</span></h1>
			<nav class="nav">
				<ul class="nav__list">
					<li class="nav__item"><a class="nav__link" href="#">intro</a></li>
					<li class="nav__item"><a class="nav__link" href="#">gallery</a></li>
					<li class="nav__item"><a class="nav__link" href="#">servieces</a></li>
					<li class="nav__item"><a class="nav__link" href="#">contact</a></li>
				</ul>
			</nav>
   </header>
*{
    box-sizing: border-box;
}
.nav{
	margin-top:5%;
	
	&__list{
		display: flex;
	}
	
	&__item{
		flex: 1;
		padding-right: 5%;
	}
	
	&__link{
		color: #fff;
	}
}

.header{
	width: 94%;
	height: 80vh;
	position: relative;
	margin: 0 auto;
	background: url(../assets/herobanner.jpg);
	background-size: cover;
	background-position: center bottom;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	&__title{
		font-size: 3.5em;
		font-family: $base-font-family;			
		position: relative;
		white-space: nowrap;
		letter-spacing: 0.05em;
		z-index: 1;
		line-height: 1;
		color: $color-violet;
		font-weight: 600;
	}
	
	&__title-word{		
		position: absolute;
		top: 50%;
		left:50%;
		transform: translate(-50%, -60%);			
		font-size: 3.5em;
		font-family: 'Playfair Display', serif;
		letter-spacing: 0.0625em;
		color: #fff;
		z-index: -1;
		
	}
}

 

komentarz zamknięcia: Problem rozwiązany.  Zmiana wartości paddingu (zamiana padding right wyrażonego w procentach na em).
komentarz 10 stycznia 2019 przez pablop76 VIP (123,180 p.)
A gdzie jest napisane, że  ma tyle zajmować?

1 odpowiedź

0 głosów
odpowiedź 10 stycznia 2019 przez pablop76 VIP (123,180 p.)
Ustawiając układ kolumnowy zmieniasz main na cross axis. Przez to align- Item odnosi się do osi x. Ustawiając center masz taki efekt jak widać.
komentarz 10 stycznia 2019 przez Uzytkowniczka Nowicjusz (220 p.)
Tak wiem, że centruje według osi x poprzez align-items. Nie rozumiem tylko dlaczego nie zostają uwzględnione paddingi nadane na li,bo gdy usunę padding right to właśnie cała zawartość nav zajmuje te 288.2px szerkości.

Podobne pytania

0 głosów
1 odpowiedź 135 wizyt
pytanie zadane 30 marca 2018 w HTML i CSS przez Dawid Kuzak Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 1,694 wizyt
0 głosów
1 odpowiedź 145 wizyt
pytanie zadane 23 października 2016 w JavaScript przez bugs55 Obywatel (1,090 p.)

92,696 zapytań

141,607 odpowiedzi

320,114 komentarzy

62,056 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...