Jak ustawić kolumnę o stałej szerokości za pomocą CSS flexbox


149

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

Chcę, aby czerwone pudełko miało tylko 25 em szerokości, gdy jest w widoku obok siebie - próbuję to osiągnąć, ustawiając CSS w tym zapytaniu o media:

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

do:

.flexbox .red {
  width: 25em;
}

Ale kiedy to robię, dzieje się tak:

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

Masz pojęcie, co robię źle?

Odpowiedzi:


333

Należy raczej użyć właściwości flexlub flex-basisniż width. Przeczytaj więcej na MDN .

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

Właściwość flexCSS to skrótowa właściwość określająca zdolność elementu flex do zmiany wymiarów w celu wypełnienia dostępnej przestrzeni. Zawiera:

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 */

Proste demo pokazuje, jak ustawić pierwszą kolumnę na 50pxstałą szerokość.


Zobacz zaktualizowany kodepen oparty na Twoim kodzie.


22
Nie zdawałem sobie sprawy, że muszę zmienić flex-shrink, dzięki, dobra odpowiedź.
Paul Redmond

Nie mogłem uruchomić flex-base: auto do pracy, dopóki nie zdałem sobie sprawy, że siatka mojej biblioteki komponentów (Reakcja semantyczna UI) zawiera nieuczciwą regułę css ustawiającą domyślną szerokość kolumny 😅 medium.freecodecamp.org/…
Roman Scher

1

Jeśli ktoś chce mieć responsywny flexbox z procentami (%), jest znacznie łatwiej w przypadku zapytań o media.

flex-basis: 25%;

Podczas testowania będzie to dużo bardziej płynne.

// 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%;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.