Abstand zwischen flex-Elemente?

JSFiddle

Habe ich eine Liste angezeigt mit flex:

<ul>
    <li></li>
    ....

ul{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  background: gold;
}

li{
    flex-basis: 25%;
    background:grey;
 }

Nun möchte ich etwas Platz zwischen meine li-Elemente, das hinzufügen von margin oder padding schiebt die Elemente in die nächste Zeile (ich will flex-wrap, wenn ich mehr als 4 Elemente).

Ich weiß, die oben erwähnt sind, können gelöst werden mit der box-sizing, aber mein Hauptproblem ist, dass ich möchte, Abstand zwischen den Elementen, aber mit dem ersten und letzten element, um line-up auf der linken und rechten Seite des übergeordneten Elements.

Wie kann das erreicht werden?

zB.

|li|spacing|li|spacing|li|spacing|li|
InformationsquelleAutor panthro | 2016-09-08
  1. 11

    Check this out - so habe ich calc zum einstellen der flex-basis zu ermöglichen benutzerdefinierte margins, die Sie verteilen kann, für die ul (verwendet justify-content: space-between für die Verteilung, die Marge).

    CSS:

    ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: gold;
  margin: 10px;
  padding: 0;
  height: 100px;
}
li {
  flex-basis: calc(25% - 20px);
  background: grey;
}

    HTML:

    <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

    Lassen Sie mich wissen Ihr feedback zu diesem. Danke!

    • Pete - ich denke, der behoben wurde, mit einer Bearbeitung von Raum-zwischen. Das sieht gut aus, danke!
    • Tun wird, wenn er mich lässt.
    • Genial - das ist sehr hilfreich!!!
    • Beachten Sie, dass "IE & Edge berichtet, die keine Unterstützung calc in einer 'flex'." -- calc() @ caniuse.com
    InformationsquelleAutor kukkuz
  2. -1

    Müssen Sie verstehen, dass die Einstellung flex-basis: 25%; zu 25% erhalten Sie "ÜBER" drei Elemente pro Zeile, abhängig von den Elementen Länge und display-Größe. Dies ist, weil Sie nicht zählen, der Raum, der Prozent hinzu.

    Reduzieren die Prozent dann hinzufügen padding auf der linken Seite und es funktioniert.

    li{
flex-basis: 10%;
background:grey;
padding-left: 5px;
}
    InformationsquelleAutor Shaka Flex
Schreibe einen Kommentar