CSS Flexbox: Wie richten Sie die untergeordneten Elemente einer flexbox-container an entgegengesetzten enden der Hauptachse?

Ich bin ein styling-header einer Webseite. Ich möchte den header einer einzigen Zeile, die enthält ein logo und einige Navigations-links. Ich fühle mich der beste und modernste Weg, um layout dieser header ist heute mit CSS3 ist flexbox, so das ist, was ich verwenden möchten.

Ich würde gerne für das logo so weit Links in die flex-container wie möglich und die restlichen Navigations-Elemente werden so weit rechts wie möglich. Dies kann leicht erreicht werden durch das floaten die Elemente Links und rechts, aber das ist nicht das, was ich gerne tun würde. So...

, Wie Sie tun, richten Sie die untergeordneten Elemente einer flexbox-container an entgegengesetzten enden der Hauptachse?

Es ist eine Eigenschaft, die für die flexbox-Kind-Elemente, die es Ihnen erlaubt, dies zu tun auf der Querachse, align-self, aber es scheint keiner da ist, dies zu tun auf der Hauptachse.

Der beste Weg, die ich mit gekommen dies zu erreichen, ist das einfügen eines zusätzlichen, leeren, element zwischen dem logo und der Navigation links, um zu dienen als Abstandhalter. Aber ein Teil der Grund, warum ich bin, die Wahl zu verwenden flexbox für dieses header ist zusammenhängend mit einem responsive design und ich weiß nicht, einen Weg, um das Abstand-element nehmen, bis alle verbleibenden Speicherplatz, unabhängig von der Breite des Fensters anzeigen.

Hier ist, wo ich momentan stehe mit den mark-up, vereinfacht, um nur die Elemente relevant für diese situation.

HTML

<ul>
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span></li>

  <!-- Should be as far right as possible -->
  <li>Home</li>
  <li>Products</li>
  <li>Price Sheet</li>
  <li>Capabilities</li>
  <li>Contact</li>
</ul>

CSS

ul {
  width:           100%; 
  display:         flex;
  flex-flow:       row nowrap;
  justify-content: flex-end;
  align-items:     center;

  padding:    0;
  margin:     0;

  list-style: none;
}

li {
  margin:     0 8px;
  padding:    8px;

  font-size:   1rem;
  text-align:  center;
  font-weight: bold;

  color:       white;
  background:  green;
  border:     solid 4px #333;
}

#main { font-size: 2rem; }
#main span { font-size: 1rem; }
InformationsquelleAutor JacksonHunt | 2015-09-12
  1. 5

    Ihre Frage:

    Ich weiß nicht, einen Weg, um das Abstand-element nehmen, bis alle verbleibenden Speicherplatz, unabhängig von der Breite des Fensters anzeigen.

    Dies ist genau das, was die flex-grow CSS-Regel entworfen wurde. Wenn nur ein Kind-element hat die flex-grow Attribut gesetzt, dann wird es dauern, bis alle verbleibenden Platz in der flex-container. Den nur markup, die Sie benötigen in diesem Fall ist der folgende:

    HTML:

    <li id="spacer"></li>

    CSS:

    #spacer {
    visibility: hidden;
    flex-grow: 1;    
}

    Eine Komplette Live-Demo:

    CSS:

    ul {
  width:           100%; 
  display:         flex;
  flex-flow:       row nowrap;
  justify-content: flex-end;
  align-items:     center;

  padding:    0;
  margin:     0;

  list-style: none;
}

li {
  margin:     0 8px;
  padding:    8px;

  font-size:   1rem;
  text-align:  center;
  font-weight: bold;

  color:       white;
  background:  green;
  border:     solid 4px #333;
}

#main { font-size: 2rem; }
#main span { font-size: 1rem; }

#spacer {
    visibility: hidden;
    flex-grow: 1;    
}

    HTML:

    <ul>
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span></li>

  <!-- Spacer element -->
  <li id="spacer"></li>
    
  <!-- Should be as far right as possible -->
  <li>Home</li>
  <li>Products</li>
  <li>Price Sheet</li>
  <li>Capabilities</li>
  <li>Contact</li>
</ul>

    JSFiddle Version: https://jsfiddle.net/7oaahkk1/

    • Sehr gut gemacht! Ich entdeckte diese gerade bevor ich hierher kam, um zu sehen, Ihre Antwort. Danke und cheers. @DavidDomain ich sehe, Sie wurden auf diese zu – es gefällt mir auch, dass Ihre Methode nicht erfordern einen spacer. Allerdings habe ich das Gefühl Maximillian 's Antwort ist eine bessere Praxis, als die Größe der wichtigsten Elemente (mit Inhalt) erhalten unabhängig von der Fenstergröße.
    • Es ist Ihre Antwort abgesehen, wären Sie damit einverstanden, diese Methode ist besser, der Praxis?
    • Beide Antworten sind gute Praxis meiner Meinung nach, machen Sie einfach leicht verschiedene Dinge. Davids Antwort wächst die am weitesten Links stehende element füllen Sie den zusätzlichen Raum, während die mine verwendet einen Abstandhalter füllen Sie den zusätzlichen Raum. Also es hängt wirklich davon ab, ob Sie möchten, dass Ihre weitesten Links stehende element in Größe vergrößert werden, um den Raum zu füllen. Wenn nicht, verwenden Sie meine Lösung, wenn dem so ist, verwenden Sie sein.
    InformationsquelleAutor Maximillian Laumeister
  2. 3

    Ich denke, die einzige Flexibilität, die erforderlich ist, zumindest bei großen Bildschirmen), sollten auf den ersten flex-Element in der Liste. Die, die Sie wollen zu platzieren Sie Ihr logo an.

    Durch die Einstellung dieser Elemente flex-grow Regel 1 und die text-align zu left bleibt er auf der linken Seite, wächst in der Größe, so dass Sie sicher, dass alle anderen Elemente bleiben auf der rechten Seite. Da kann das logo haben eine größere Höhe als alle anderen Gegenstände, würde es Sinn machen, ändern Sie die align-items Regel baseline, machen Sie sicher, dass alle Elemente, die horizontal ausgerichtet sind.

    Außerdem habe ich noch ein paar media queries zum ändern der flex-Einstellungen entsprechend anpassen.

    CSS:

    html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

ul {
    width:           100%; 
    display:         flex;
    flex-flow:       column nowrap;
    justify-content: center;
    align-items:     stretch;

    padding:         0;
    margin:          0;

    list-style:      none;
}

li {
    margin:     0;
    padding:    8px;

    font-size:   1rem;
    text-align:  center;
    font-weight: bold;

    color:       white;
    background:  green;
    border:     solid 4px #333;

}

li:first-child {
    font-family: sans;
    font-size: 2em;
    text-align: center;
}

li:first-child span {
    font-size: initial;
}

@media (min-width: 34em) {
    ul {
        flex-flow: row wrap;
        justify-content: space-between;
        align-items:     flex-start;
    }

    li {
        flex: 1;
    }

    #main {
        flex: 0 0 100vw;
    }
}

@media (min-width: 48em) {
    ul {
        justify-content: flex-end;
        align-items:     baseline;
    }

    li {
        flex: none;
    }

    #main {
        flex: 1 0 auto;
        text-align: left;
    }
}

    HTML:

    <ul>
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span></li>
  <!-- Should be as far right as possible -->
  <li>Home</li>
  <li>Products</li>
  <li>Price Sheet</li>
  <li>Capabilities</li>
  <li>Contact</li>
</ul>

    • Ich denke, das ist eine gute Antwort und eine, die referenziert werden soll, von jemand suchen, um dies in der Zukunft tun. Allerdings kann ich empfehlen, dass Sie entfernen Sie die media-queries und den Fokus auf die Beantwortung der Frage nicht direkt? Ich denke, dies wäre günstiger. Es scheint auch, dass die Reaktionsfähigkeit nicht auf eine intermediate-Fenster Größe und der flex beginnen die Kinder zu wickeln.
    • Danke für dein feedback, weiß es zu schätzen. Obwohl ich nicht voll Zustimmen. Ich würde das nicht als ein zusätzliches leeres element in der Liste als eine bessere Praxis. Das Gegenteil ist wahr. Dadurch wird die pseudo-Selektoren wie :nth-child oder nth-of-type mit odd oder even Werte nutzlos. Gleiche gilt für JS-iteration.
    InformationsquelleAutor DavidDomain
  3. 1

    Im wesentlichen müssen Sie ein Zeile container mit zwei untergeordnete Spalten

    • - container ist ein flexibler div
    • Spalte ist ein angespannter div mit dem logo
    • Spalte zwei ist eine flexible ul mit gebeugtem li

    UND "justify-content: space-between" - verschieben der Spalten an den enden

    Check my snippet (ganze Seite)!

    CSS:

    .container,
.menu {
  display: flex;
}
.container {
  justify-content: space-between;
  width: 100%;
}
.menu {
  padding: 0;
  margin: 0;
  list-style: none;
}
li,
.logo {
  margin: 0 8px;
  padding: 8px;
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  color: white;
  background: green;
  border: solid 4px #333;
}
#main {
  font-size: 2rem;
}
#main span {
  font-size: 1rem;
}

    HTML:

    <div class="container">
  <div id="main" class="logo">Some Logo <span>Some tag line.</span>
  </div>
  <ul class="menu">
    <li>Home</li>
    <li>Products</li>
    <li>Price Sheet</li>
    <li>Capabilities</li>
    <li>Contact</li>
  </ul>
</div>

    InformationsquelleAutor Rene van der Lende
  4. 0

    JSfiddle Demo

    1. Wickeln ul über den rest der Objekte in der Liste und verwenden Sie geschachtelte flex-container. Dies ist flexbox zu handeln, die auf zwei Elementen.
    2. Verwenden justify-content: space-between auf die wichtigsten übergeordneten flexbox gleichmäßig Raum die beiden Elemente.

    CSS:

    .parent-menu {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  /* Modify */
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  margin: 0 8px;
  padding: 8px;
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  color: white;
  background: green;
  border: solid 4px #333;
}
#main {
  font-size: 2rem;
}
#main span {
  font-size: 1rem;
}
.right-menu {
  display: flex;
  /* Add */
}

    HTML:

    <ul class="parent-menu">
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span>
  </li>
  <ul class="right-menu">
    <!-- Should be as far right as possible -->
    <li>Home</li>
    <li>Products</li>
    <li>Price Sheet</li>
    <li>Capabilities</li>
    <li>Contact</li>
  </ul>
</ul>

    InformationsquelleAutor Manoj Kumar
  5. 0

    Eine Möglichkeit ist, um einen rechten Rand auf das erste element

    CSS:

    ul {
  width:           100%; 
  display:         flex;
  flex-flow:       row nowrap;
  justify-content: flex-end;
  align-items:     center;

  padding:    0;
  margin:     0;

  list-style: none;
}

li {
  margin:     0 8px;
  padding:    8px;

  font-size:   1rem;
  text-align:  center;
  font-weight: bold;

  color:       white;
  background:  green;
  border:     solid 4px #333;
}

#main { 
  font-size: 2rem; 
  margin-right: auto;  /* create a right margin as needed */
}  
#main span { font-size: 1rem; }

#spacer {
    visibility: hidden;
    flex-grow: 1;    
}

    HTML:

    <ul>
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span></li>
  <!-- Should be as far right as possible -->
  <li>Home</li>
  <li>Products</li>
  <li>Price Sheet</li>
  <li>Capabilities</li>
  <li>Contact</li>
</ul>

    InformationsquelleAutor vals
Schreibe einen Kommentar