Flexbox og menuer
Når det kommer til at opsætte menuer på hjemmesider,har vi de sidste mange år, opsat dem ved at benytte float
eller display: inline;
.
Derefter har vi måtte justere afstande med padding
og margin
, men med Flexbox har der åbnet sig nye fatastiske muligheder.
Simpel horisontal menu
Menuen uden flex og med helt simpel css
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
background: #666;
}
.menu a {
display: block;
text-decoration: none;
color: #fff;
padding: .6em 1em;
}
.menu a:hover {
background: #888;
}
display: flex;
Her er tilføjet helt simpelt:
.menu ul {
display: flex;
}
justify-content
Vi kan nemt ændre på placering og mellemrum mellem menupunkterne med justify-content
.
- flex-start (default)
- flex-end
- flex-center
- space-around
- space-between
flex-end
Læg mærke til, at det ikke er som float: right
hvor elementerne også skifter rækkefølge. Det er med justify-content: flex-end
stadig menupunktet Forside der står forrest.
.menu ul {
display: flex;
justify-content: flex-end;
}
center
.menu ul {
display: flex;
justify-content: center;
}
space-around
Mellemrummet mellem menupunkterne + deres afstand (slags padding - ses ved at holde musen hen over et menupunktet) - disse mellemrum er nøjagtig samme bredde.
Læg mærke til at afstanden også er i begyndelsen og i slutningen af menuen!
.menu ul {
display: flex;
justify-content: space-around;
}
space-between
Med space-between
fjernes afstanden i begyndelsen og i slutningen af menuen. Nu er der kun en ens afstand mellem menupunkterne.
.menu ul {
display: flex;
justify-content: space-between;
}
flex-wrap
Hvis du benytter din Ipad eller ser menueksemplerne på en lille skærm, vil du opdage, at de enkelte menuelementer mangler lidt plads. Ved at benytte flex-wrap: wrap;
sikre du, at menuelementerne altid har den plads de behøver. Når pladsen bliver for trang deler menuen sig i flere linjer.
For at gøre menuen mere mobilvenlig, benytter vi @media screen and (min-width: 30em)
til først at virke ved skærmerstørrelser der er større end de 30em. Under denne størrelse ses menuen helt uden flexbox
som i eksempel nr. 1
@media screen and (min-width: 30em) {
.menu ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
}
Nu er vi næsten i mål ... der mangler lige den sidste finish
justify-content
giver et problem i vores menu, uanset om vi vælger center, flex-start, flex-end, space-around eller space-between
.
Der skal selvfølgelig ikke være et mellemrum mellem de enkelte menuelementer. Det er der heldigvis også en løsning til.
Indtil nu har vi kun arbejdet i flex containeren (ul.menu
) , men for at løse problemet med mellemrummet skal vi nu bevæge os til flex item (ul.menu li
)
På .menu li
tilføjer vi nu et flex: 1 0 auto;
FORKLARING:
flex: 1 0 auto
Her betyder 1 at elementerne kan vokse, så de altid vil fylde 100%.
flex: 1 0 auto
Her betyder 0 at den aldrig må blive mindre end sin størrelse.
flex: 1 0 auto
at bredden på elmenterne er fleksible.
Så det endelige resultat ser ud som:
@media screen and (min-width: 30em) {
.menu ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu li {
flex: 1 0 auto;
text-align: center;
}
}