Display Flex - das letzte Element in voller Breite halten

Question

Ich versuche, mein 3D-Element mit voller Breite des flex Containers zu halten. aber nicht das reuslt. jemand schlägt mir den richtigen Weg für ie11 hier?

.parent{ 
 
    border:1px solid red; 
 
    display:flex; 
 
    justify-content:space-between; 
 
    padding:0 40px; 
 
} 
 

 
.child{ 
 
    flex:0 0 30%; 
 
    border:1px dashed green; 
 
} 
 

 
.child.last{ 
 
/* not working */ 
 
    width:100%; 
 
}

<div class="parent"> 
 
    <div class="child">one</div> 
 
    <div class="child">two</div> 
 
    <div class="child last">three</div> 
 
</div>

Answer 1

zum letzten child Damit 100% breit, fügen flex-wrap: wrap-parent und flex-basis letzten child verwenden wickeln und sein.

.parent{ 
 
    border:1px solid red; 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
    justify-content:space-between; 
 
    padding:0 40px; 
 
} 
 

 
.child{ 
 
    flex:0 0 30%; 
 
    border:1px dashed green; 
 
} 
 

 
.child.last{ 
 
    flex-basis: 100%; 
 
}

<div class="parent"> 
 
    <div class="child">one</div> 
 
    <div class="child">two</div> 
 
    <div class="child last">three</div> 
 
</div>

Answer 2

Verwenden flex zu erreichen, was Sie wollen.

.parent{ 
 
    border:1px solid red; 
 
    display:flex; 
 
    justify-content:space-between; 
 
    padding:0 40px; 
 
} 
 

 
.child{ 
 
    flex:0 0 30%; 
 
    border:1px dashed green; 
 
} 
 

 
.child.last{ 
 
/* not working */ 
 
    width:100%; 
 
    flex: 1; 
 
}

<div class="parent"> 
 
    <div class="child">one</div> 
 
    <div class="child">two</div> 
 
    <div class="child last">three</div> 
 
</div>

Die Flex-Eigenschaft gibt die Länge des Elements, bezogen auf den Rest der flexiblen Elemente in dem gleichen Behälter.

Es macht das flexible Element flexibel und setzt die flexible Basis auf Null, was dazu führt, dass ein Element den angegebenen Anteil des verbleibenden Speicherplatzes erhält.