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;
}
}