zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü mit Flexbox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.02.2017, 09:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2009
Beiträge: 18
Pavenstaedter befindet sich auf einem aufstrebenden Ast
Standard Menü mit Flexbox

Hallo zusammen,
ich habe da im Moment ein massives CSS-Problem.
Ich möchte ein Menü erstellen, wo die Menüpunkte,die gleiche Höhe haben, über die zur Verfügung stehende Breite verteilt sind und der Text in den Schlatflächen zentriert (horizontal und vertikal) sind.
Mein Lösungsansatz mit Flexbox findet Ihr hier:
https://jsfiddle.net/3f4Lpvfp/

HTML-Code:
<ul>
        <li><span>Item</span></li>
        <li><span>Item</span></li>
        <li><span>Item - much much much much more longer</span></li>
    </ul>
HTML-Code:
body {
        width: 70%;
    }
      ul {
       display: flex;
       justify-content: space-between; 
       flex-direction: row;
       align-items: center;
    }
      li {
          width: 30.25%;
          height: 100%;
     padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    background: yellow;
    border: 1px solid #333;
          
      }
     
      span {
           text-align: center;
           display: block;
           align-self: center;
           color: blue;
      }
Leider bekomme ich die Boxen nicht auf die gleiche Höhe
Hat vielleicht irgendwer eine Idee?

LG
Volker

So soll es werden:

Geändert von Pavenstaedter (20.02.2017 um 10:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.02.2017, 09:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.484
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Sind die gelben Kasterl denn etwa nicht gleich hoch?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.02.2017, 10:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2009
Beiträge: 18
Pavenstaedter befindet sich auf einem aufstrebenden Ast
Standard

Hi,
das Bild soll das Ergebnis sein - im Fiddle siehst Du, wie es ist...

LG
Volker
Mit Zitat antworten
  #4 (permalink)  
Alt 20.02.2017, 10:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 955
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Ich sehe für die span-Elemente weder Sinn noch Bedarf. Also besser und übersichtlicher:

Code:
<ul>
   <li>Item</li>
   <li>Item</li>
   <li>Item - much much much much more longer</li>
</ul>
Zunächst löscht du dein gesamtes Beispiel-CSS.

Dann, zu besseren Übersicht, zunächst die CSS-Angaben, die mit Flexbox nix zu tun haben:

Code:
body {
   width: 70%;
}
li {
   background: yellow;
   color: blue;
   text-align: center;
   padding: 5px;
   border: 1px solid #333;
}
Jetzt die CSS-Angaben, damit die Flex-Items (hier: die li-Elemente) die gesamte zur Verfügung stehende Breite füllen und gleich hoch werden:

Code:
ul {
   display: flex;
}
li {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 1px;
}
Zum Schluß wird der Inhalt der li-Elemente noch mittels Flexbox zentriert:

Code:
li {
   display: flex;
   justify-content: center;
   align-items: center;
}
Das gesamte CSS zusammengefaßt sieht dann folgendermaßen aus:

Code:
body {
   width: 70%;
}
ul {
   display: flex;
}
li {
   background: yellow;
   color: blue;
   text-align: center;
   padding: 5px;
   border: 1px solid #333;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 1px;
   display: flex;
   justify-content: center;
   align-items: center;
}
Gruss

MrMurphy

Geändert von MrMurphy (20.02.2017 um 11:22 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 20.02.2017, 17:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2009
Beiträge: 18
Pavenstaedter befindet sich auf einem aufstrebenden Ast
Standard

Danke!

das war die Lösung.
flex-grow, flex-shrink und flex-basis muss ich mir noch mal genauer anschauen.

LG
Voilker
Mit Zitat antworten
  #6 (permalink)  
Alt 21.02.2017, 07:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.484
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Hier hast du eine gute Übersicht über alle Dinge, die so mit Flexbox möglich sind, kann ich nur empfehlen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Mit Zitat antworten
Antwort

Stichwörter
centered, css, flexbox

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Slide Menü Philidor Javascript & Ajax 12 04.09.2013 23:32
Menü auf Startseite funktioniert nach FORM SUBMIT nicht mehr Ceres82 (X)HTML 3 23.08.2013 21:00
Verhalten fixed Menü beim Verkleinern des Fensters Yumyoko CSS 1 07.10.2011 16:54
Darstellungsproblem flohpapa CSS 3 16.12.2009 08:55
Umbruch in einem LI bei horizontalem Menü M4rco CSS 12 13.10.2006 11:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:04 Uhr.