Flex-Elemente auf der linken Seite ausrichten

Ich habe Flex-Elemente mit justify-content: space-around; ausgerichtet In dem unten angegebenen Beispiel muss ich das letzte Element nach links ausrichten. Bitte helfen Sie.Flex-Elemente auf der linken Seite ausrichten

.wrapper { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    width: 30%; 
 
    border: 1px solid red; 
 
    margin-bottom: 20px; 
 
}

<div class="wrapper"> 
 
    <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, </div> 
 
    <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, vitae venenatis est ultricies blandit. Aenean augue enim, </div> 
 
    <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, </div> 
 
    <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, vitae venenatis ela enim, dignissim non </div> 
 
</div>

Quelle

2017-08-18 athi

Sind Sie sicher, dass Sie ihn nach links ausgerichtet werden soll, oder tun Sie es mit aufreihen wollen der linke Rand des ersten Artikels? Ersteres könnte möglich sein, letzteres ist definitiv nicht möglich. –

Ich möchte es mit der linken Kante des ersten Elements – athi

Verwenden Marge statt justify-content: space-around;

.wrapper { 
 
    width:100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    width: 30%; 
 
    margin:0 1.45%; 
 
    border: 1px solid red; 
 
    margin-bottom: 20px; 
 
    float:left; 
 
}

<div class="wrapper"> 
 
    <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, </div> 
 
    <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, vitae venenatis est ultricies blandit. Aenean augue enim, </div> 
 
    <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, </div> 
 
    <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, vitae venenatis ela enim, dignissim non </div> 
 
</div>

Quelle

2017-08-18 03:26:33

ausrichten Das Problem ist, es kann eine beliebige Anzahl von Blöcken sein. Wenn es nur 2 Blöcke gibt, müssen sie zentriert werden. – athi

Sie möchten linksbündig auf den ersten Gegenstand ausrichten und mittig auf 2 Gegenstände ausrichten !!! Es kann nicht von CSS getan werden! Kann Javascript sein (JQuery) –

Flex-Elemente auf der linken Seite ausrichten

Antwort

Verwandte Themen