Ich habe angefangen, Flex zu verwenden, und ich liebe, wie es funktioniert.
Ich verwende Flex-Layout und möchte das btn-group
Klasse drinnen dashboard-body
um die volle Breite des Elternteils zu erreichen. Im Moment entspricht seine Breite der Breite beider Schaltflächen zusammen.
Was ich hier erreichen möchte, ist das Hinzufügen von Leerzeichen zwischen beiden Schaltflächen. Außerdem möchte ich keinen rechten oder linken Rand verwenden. Ich will das btn-group
div, um die volle Breite seines Elternteils zu haben dashboard-body
damit ich die Flex-Eigenschaft verwenden kann align-content: space-between
genug Platz zwischen den beiden Knöpfen haben.
Gibt es einen besseren Weg als das Hinzufügen von Rändern/Auffüllungen um Schaltflächen herum, um dasselbe zu tun?
Vielen Dank.
Hier ist der Code:
.dashboard-body {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
}
<div class="dashboard-body">
<p>You don't have any sales data.</p>
<p>Please add a new book or upload CSVs.</p>
<div class="btn-group">
<a href="#">
<input class="add-new-book-btn" type="submit" value="Add New Book">
</a>
<a href="#">
<input class="add-new-book-btn" type="submit" value="Upload CSV">
</a>
</div>
.btn-group { align-self:stretch; }
jsfiddle.net/bLaoh9td– Pawel
18. März 2016 um 9:19 Uhr
align-content: space-between
funktioniert in dem Fall nicht. Irgendeine Lösung dafür.– vikrantnegi
18. März 2016 um 9:26 Uhr
Sie müssen die machen
.btn-group
auch ein Flex-Container: jsfiddle.net/bLaoh9td/1 (Übrigens ist esjustify-content
).– Pawel
18. März 2016 um 9:27 Uhr
@ vikrantnegi007 Ihr Beispiel funktioniert gut, wenn “Wide Item” sein muss Erste oder letzte (indem CSS ein wenig angepasst wird) Element der Flexbox. Es scheint jedoch nicht zu funktionieren, wenn ich möchte, dass das „mittlere“ Element die volle Breite der Flexbox einnimmt. Gibt es eine Möglichkeit, es zu beheben? Oder funktioniert Flexbox nur so?
– Dimitri K
21. Februar 2019 um 13:00 Uhr
@DimitryK Können Sie eine Jsfiddle für Ihren Fall erstellen? Ich kann dir helfen, indem ich mir den Code ansehe.
– vikrantnegi
22. Februar 2019 um 9:19 Uhr