Как установить столбец фиксированной ширины с помощью CSS flexbox


160

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

Я хочу, чтобы красное поле было шириной всего 25 см, когда оно отображается бок о бок - я пытаюсь добиться этого, установив CSS внутри этого медиа-запроса:

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

кому:

.flexbox .red {
  width: 25em;
}

Но когда я это делаю, происходит следующее:

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

Есть идеи, что я делаю не так?

Ответы:


375

Вам следует использовать свойство flexили, flex-basisа не width. Узнайте больше на MDN .

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

Свойство flexCSS - это сокращенное свойство, определяющее способность гибкого элемента изменять свои размеры для заполнения доступного пространства. Это содержит:

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

Простая демонстрация показывает, как установить 50pxфиксированную ширину для первого столбца .


См. Обновленный код на основе вашего кода.


24
Не понимал, что мне пришлось отказаться flex-shrink, спасибо, хороший ответ.
Пол Редмонд,

Не удалось получить flex-base: auto, чтобы работать, пока я не понял, что сетка моей библиотеки компонентов (Semantic UI React) имеет мошенническое правило css, устанавливающее ширину столбца по умолчанию 😅 medium.freecodecamp.org/…
Роман Шер

Это самый простой и ясный пример, который я когда-либо видел. Ваши комментарии рядом с flex-grow, flex-shrink и flex-base - вот что скрепило меня. Думаю, сейчас я запомню это, вместо того чтобы думать, что стенография - это какое-то загадочное заклинание.
Нейт,

3

Если кто-то хочет иметь гибкий флексбокс с процентами (%), это намного проще для медиа-запросов.

flex-basis: 25%;

При тестировании это будет намного плавнее.

// 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%;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.