2017-12-28 7 views
2

Ich habe eine Menge Tutorials über CSS-Flex-Boxen und CSS-Grids gelesen, aber ehrlich gesagt kann ich einfach nicht herausfinden, wie man dieses einfache (?) Ding macht.Breite der breitesten Element-Sets Breite aller Geschwister in der Zeile

Alles was ich will ist, dass die Elemente in einem Container so breit wie das breiteste Element sind.

Ich möchte nicht, dass sie die gesamte Breite des Containers ausfüllen, nur alle wachsen bis zur maximalen Breite. Kann das mit CSS gemacht werden?

Betrachten Sie diese HTML:

<div class="container"> 
    <button>a normal button</button> 
    <button>tiny</button> 
    <button>a really, really, really wide button</button> 
</div> 

, die ungefähr so ​​erzeugt:

enter image description here

Was so etwas wie dieses ich will, ist, wo sie die ganze Breite dieser breitesten Taste sind:

enter image description here

Ich will sie nicht nur, um sich auszustrecken die Breite der Seite zu füllen:

enter image description here

dies getan werden kann? Wenn ja, was wäre das CSS für den obigen HTML?

+1

nur CSS-Nr. Mit js ja ist es möglich. –

+0

Es ist super einfach nur mit CSS wie [dies] (https://jsfiddle.net/5dt3qq8d/) –

Antwort

4

Ja. Dies kann mit reinem CSS geschehen.

Hier ist eine einfache Lösung:

.container { 
 
    display: inline-grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
}
<div class="container"> 
 
    <button>a normal button</button> 
 
    <button>tiny</button> 
 
    <button>a really, really, really wide button</button> 
 
</div>

Hier ist, wie es funktioniert:

Grid-Layout bietet eine Einheit für flexible Längen in einem Gitterbehälter herzustellen. Dies ist die fr Einheit. Es ist entworfen, um freien Raum im Behälter zu verteilen (und ist etwas analog zu flex-grow).

Die Grid-Spezifikation bietet jedoch ein besonders eindeutiges Verhalten, wenn die Breite/Höhe des Containers dynamisch ist (z. B. in diesem Fall display: inline-grid).

In solchen Fällen berechnet die Einheit fr die max-content jedes Rasterelements. Es nimmt dann den maximalen Wert, den es findet, und verwendet diese als 1fr Länge für alle Elemente auf der Spur.

Das führt zu Rasterelementen, die die Breite des breitesten Elements in der Zeile teilen.

Seltsam, aber wahr.

Es ist auch, warum ein Layout mit equal height rows is possible with Grid (but not flexbox).

Hier ist der entsprechende Abschnitt in der Spezifikation:

7.2.3. Flexible Lengths: the fr unit

...

Wenn der zur Verfügung stehende Raum ist unendlich (was passiert, wenn das Gitter Containers Breite oder Höhe unbestimmt), flex-sized (fr) Gitterspuren sind auf ihren Inhalt unter Beibehaltung ihrer jeweiligen Proportionen.

Die gebrauchte Größe jeder Flex-sized Gitterbahn wird durch die Bestimmung der max-content Größe jeder Flex-sized Gitterbahn und Dividieren dass Größe durch den jeweiligen Biegefaktor zu bestimmen, um ein „hypothetische 1fr size“ berechnet.

Die maximal die als aufgelöst 1fr Länge (die flex-Fraktion), die von jeder Gitterbahn Flex Faktor seiner endgültige Größe zu bestimmen, multipliziert wird dann verwendet.

+1

Sie, meine stilvoll kaskadierende Freund, Rock! Vielen Dank! – tscheingeld

0

Hier ist eine Lösung mit CSS-Raster mit einer beliebigen Anzahl von Tasten arbeiten:

div.container 
{ 
    display: inline-grid; 
    grid-auto-columns: 1fr; 
} 
div.container button 
{ 
    grid-row: 1; 
} 
Verwandte Themen