1. Zuhause
  2. Frage und Antwort
  3. Platz dazwischen mit flexbox

Platz dazwischen mit flexbox

2017-07-28 3 views
0

Ich habe 4 Blöcke und ich brauche Platz mit flexbox wie im Screenshot unten gezeigt: screenshot.Platz dazwischen mit flexbox

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    width: 50%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

Quelle

2017-07-28 athi

Antwort

5

Sie können mit Flex-Box Eigenschaft rechtfertigen-Inhalt. Siehe dieses ---: 

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content:space-between; 
 
} 
 

 
.block { 
 
\t 
 
    width: 40%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

Quelle

2017-07-28 09:32:36

+0

Das ist besser als meins, wenn du nach einer weniger hacky Methode suchst, aber etwas weniger präzise Kontrolle über den Rand dazwischen hast die Spalten. – beerwin

+0

ja du hast recht @beerwin –

0

Änderung der width:50% von block-width:49% seine Arbeit

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 
.block { 
 
    width: 49%; 
 

 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

Quelle

2017-07-28 09:29:38 Bhargav

+0

Ich brauche Platz nur zwischen den Spalten. – athi

0 

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    /* changed the width to 45% and added auto margin */ 
 
    width: 45%; 
 
    margin:auto; 
 
    
 
} 
 
.right{ 
 
margin-right:0px; 
 
} 
 
.left{ 
 
margin-left:0px; 
 
}
<div class="container"> 
 
    <div class="block left"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block right"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block left"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block right"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

versuchen, diesen

Quelle

2017-07-28 09:31:35 M0ns1f

+0

Es ist Platz auf der rechten Seite. Ich will nur Platz dazwischen. – athi

+0

@athi Ich entfernte den rechten Rand bitte upvote und mache es als gelöst, wenn du hast, was du brauchst – M0ns1f

0

Bitte diesen Code versuchen. Hier müssen Sie die Breite von block reduzieren und padding-right der block Klasse hinzufügen.

.block { 
    width: 48%; 
    padding-right: 2%; 
}

Hoffe das hilft.

Quelle

2017-07-28 09:32:48

0

habe ich eine unsichtbare div mit space Klasse, wieder 50% divs bis 45%, gab space 5%

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    width: 45%; 
 
} 
 
.space { 
 
width: 5%;
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="space"></div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="space"></div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

Quelle

2017-07-28 09:33:21 Zabusy

0

Sie justify-content: space-around oder justify-content: space-between verwenden können, wenn Sie Platz hinzufügen möchten zwischen Blöcken.

Oder Sie können die Größe der Blöcke, wie die

.block { 
    width: 40%; 
    margin: 0 2.5% 
} 


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

 
} 
 

 
.block { 
 
    width: 50%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

Quelle

2017-07-28 09:33:41

0

reduzieren Es ist ein wenig schwierig, aber nicht unmöglich. Verwenden Sie anstelle von Rändern Padding. Dies funktioniert, egal wie viele Gegenstände Sie haben. Die einzige Einschränkung besteht darin, nur zwei Spalten zu haben.

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.block { 
 
    width: 50%; 
 
    box-sizing: border-box; /*Set the box sizing to include paddings and borders into the width calculation*/ 
 
} 
 

 
.block:nth-child(odd) { 
 
    padding-right: 10px; /*Add right padding for odd items (left side)*/ 
 
} 
 

 
.block:nth-child(even) { 
 
    padding-left: 10px; /*Add left padding to even items (right side)*/ 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

Quelle

2017-07-28 09:34:27 beerwin

1

hinzufügen justify-content:space-between; zu Ihrem .container Ich denke, das das Problem beheben wird! Vielen Dank.

Quelle

2017-07-28 09:39:03

Verwandte Themen

 Verwandte Themen