Вопросы с тегом «flexbox»

Я пытаюсь настроить макет flexbox с тремя столбцами, где левый и правый столбцы имеют фиксированную ширину, а центральный столбец изгибается, чтобы заполнить доступное пространство. Несмотря на настройку размеров для столбцов, они по-прежнему уменьшаются при уменьшении окна. Кто-нибудь знает, как этого добиться? Еще одна вещь, которую мне нужно сделать, это скрыть …

316 html  css  flexbox 

У меня есть 4 столбца flexbox, и все работает нормально, но когда я добавляю некоторый текст в столбец и устанавливаю для него большой размер шрифта, столбец становится шире, чем должен быть из-за свойства flex. Я попытался использовать, word-break: break-wordи это помогло, но все же, когда я изменяю размер столбца до …

314 html  css  flexbox 

Вы можете переопределить align-itemsс align-selfпомощью гибкого элемента. Я ищу способ переопределить justify-contentгибкий элемент. Если у вас был контейнер с флексбоксом justify-content:flex-end, но вы хотите, чтобы первым был элемент justify-content: flex-start, как это можно сделать? На это лучше всего ответил этот пост: https://stackoverflow.com/a/33856609/269396

283 css  flexbox 

Я использую flex box для отображения 8 элементов, которые будут динамически изменяться с моей страницей. Как заставить его разбить элементы на два ряда? (4 в ряду)? Вот соответствующий фрагмент: (Или, если вы предпочитаете jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ) .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { …

260 html  css  flexbox 

Так что, пытаясь создать полезный мод с использованием flexbox, я обнаружил, что кажется проблемой браузера, и мне интересно, есть ли известное исправление или обходной путь - или идеи о том, как его решить. То, что я пытаюсь решить, имеет два аспекта. Во-первых, получим модальное окно вертикально по центру, которое работает …

259 html  css  flexbox  browser-bugs 

На этот вопрос есть ответы на Stack Overflow на русском : Flexbox пункт - перенос на новую строку Есть ли способ сделать разрыв строки в многострочном flexbox? Например, разбить после каждого 3-го элемента в этом CodePen . .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; …

236 html  css  flexbox 

Я хочу иметь вертикальное меню с определенной высотой. Каждый ребенок должен заполнить рост родителя и выровнять текст по центру. Число детей случайное, поэтому мне приходится работать с динамическими значениями. Div .containerсодержит случайное количество детей ( .item), которые всегда должны заполнять рост родителя. Для этого я использовал flexbox. Для создания ссылок …

235 css  google-chrome  webkit  flexbox 

Были вопросы и статьи по этому поводу, но, насколько я могу судить, нет ничего убедительного. Лучшее резюме, которое я смог найти, это flex-based позволяет указать начальный / начальный размер элемента, прежде чем что-либо еще будет вычислено. Это может быть процент или абсолютное значение. ... что само по себе мало говорит …

224 css  flexbox  width 

Вот код, который я использую для достижения вышеуказанного макета: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } …

214 css  layout  multiple-columns  flexbox 

Как центрировать текст в ReactNative как по горизонтали, так и по вертикали? У меня есть пример приложения в rnplay.org, где justifyContent = "center" и alignItems = "center" не работает: https://rnplay.org/apps/AoxNKQ Текст должен быть в центре. И почему между текстом (желтым) и родительским контейнером есть поле сверху? Код: 'use strict'; var …

212 reactjs  flexbox  react-native 

https://jsfiddle.net/vhem8scs/ Можно ли сделать так, чтобы два элемента были выровнены по левому краю, а один - по флексбоксу? Ссылка показывает это более четко. Последний пример - это то, чего я хочу достичь. Во flexbox у меня есть один блок кода. С плавающей точкой у меня есть четыре блока кода. Это …

212 css  alignment  flexbox 

У меня есть 2 деления бок о бок в flexbox. Правая рука всегда должна быть одинаковой ширины, и я хочу, чтобы левая рука просто занимала оставшееся пространство. Но это не будет, если я специально не установлю его ширину. Таким образом, на данный момент он установлен на 96%, что выглядит нормально, …

205 html  css  flexbox 

Я уже прочитал несколько учебных пособий по Flexbox, но все еще не могу заставить эту простую задачу работать. Как я могу сделать красную коробку до 100% ширины? Код: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake …

203 flexbox  react-native 

Я пытался стилизовать fieldsetэлемент с помощью display: flexи display: inline-flex. Тем не менее, это не сработало: flexвел себя как blockи inline-flexвел себя как inline-block. Это происходит как в Firefox, так и в Chrome, но странным образом это работает в IE. Это ошибка? Я не мог найти, что fieldsetдолжно иметь какое-то …

201 html  css  flexbox 

В 3-рядном макете: верхний ряд должен быть измерен согласно его содержанию нижний ряд должен иметь фиксированную высоту в пикселях средний ряд должен расширяться, чтобы заполнить контейнер Проблема заключается в том, что при расширении основного содержимого он разделяет строки верхнего и нижнего колонтитула: HTML: <section> <header> header: sized to content <br>(but …

196 css  layout  flexbox