So legen Sie eine Spalte mit fester Breite mit der CSS-Flexbox fest

149

CodePen: http://codepen.io/anon/pen/RPNpaP .

Ich möchte, dass das rote Feld nur 25 em breit ist, wenn es nebeneinander angezeigt wird. Ich versuche dies zu erreichen, indem ich das CSS in dieser Medienabfrage einstelle:

@media all and (min-width: 811px) {...}

zu:

.flexbox .red {
  width: 25em;
}

Aber wenn ich das mache, passiert Folgendes:

http://i.imgur.com/niFBrwt.png

Irgendeine Idee, was ich falsch mache?

Wissenschaft
quelle

Antworten:

330

Sie sollten die Eigenschaft flexoder flex-basisanstelle von verwenden width. Lesen Sie mehr über MDN .

.flexbox .red {
  flex: 0 0 25em;
}

Die flexCSS-Eigenschaft ist eine Kurzform-Eigenschaft, die die Fähigkeit eines Flex-Elements angibt, seine Abmessungen zu ändern, um den verfügbaren Platz zu füllen. Es beinhaltet:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

Eine einfache Demo zeigt, wie Sie die erste Spalte auf eine 50pxfeste Breite einstellen .


Sehen Sie sich den aktualisierten Codepen an, der auf Ihrem Code basiert.

Aufkleber
quelle
21
Ich wusste nicht, dass ich überschreiben musste flex-shrink, danke, gute Antwort.
Paul Redmond
Flex-Basis konnte nicht erreicht werden: Auto to Work, bis mir klar wurde, dass das Raster meiner Komponentenbibliothek (Semantic UI React) eine unerwünschte CSS-
Roman Scher
1

Wenn jemand eine reaktionsfähige Flexbox mit Prozentsätzen (%) haben möchte, ist dies für Medienabfragen viel einfacher.

flex-basis: 25%;

Dies wird beim Testen viel reibungsloser.

// VARIABLES
$screen-xs:                                         480px;
$screen-sm:                                         768px;
$screen-md:                                         992px;
$screen-lg:                                         1200px;
$screen-xl:                                         1400px;
$screen-xxl:                                        1600px;

// QUERIES
@media screen (max-width: $screen-lg) {
    flex-basis: 25%;
}

@media screen (max-width: $screen-md) {
    flex-basis: 33.33%;
}
chris_r
quelle