Mit margin-flex-Elemente

War ich unter dem Eindruck, dass ein Rand Hinzugefügt werden können flex-Artikel/Kinder-und flexbox automatisch die Rechnung und berechnen die korrekten Abstände zwischen den Elementen.

Ich kann nicht scheinen, um diese arbeiten, wie ich möchte, aber.

Fiddle hier: https://jsfiddle.net/dba5ehcw/1/

.flex-item{
    border: 1px solid blue;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
}

So dass jeder flex-Element im moment ist die Hälfte der Breite des Containers, und Sie fließen schön nebeneinander.

Ich würde gerne in der Lage sein, um einen Rand hinzuzufügen, sagen wir, 1em, um die flex-items, um zu geben Ihnen etwas Raum zum atmen, aber damit werden Sie größer als 50% und nicht mehr Stapel nebeneinander, auf der gleichen Linie, weil Sie zu weit sind.

Gibt es einen Weg, um Marge auf die flex-items und den flexbox-container dies berücksichtigen und anpassen (verringern) die Spaltenbreite entsprechend?

InformationsquelleAutor Luke Twomey | 2015-09-24

  1. 0

    Versuchen Sie dies : -

    .flex-container{
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;

}

.flex-item {
    justify-content: space-around;
    margin: 1%;
    background: red;
    border: 1px solid blue;
    box-sizing: border-box;
    height: 160px;
    width: 48%;
}

    https://jsfiddle.net/dba5ehcw/4/

    InformationsquelleAutor aphextwix

Schreibe einen Kommentar