На этот вопрос есть ответы на Stack Overflow на русском : Flexbox пункт - перенос на новую строку Есть ли способ сделать разрыв строки в многострочном flexbox? Например, разбить после каждого 3-го элемента в этом CodePen . .container { background: tomato; display: flex; flex-flow: row wrap;...
Я хочу иметь вертикальное меню с определенной высотой. Каждый ребенок должен заполнить рост родителя и выровнять текст по центру. Число детей случайное, поэтому мне приходится работать с динамическими значениями. Div .containerсодержит случайное количество детей ( .item), которые всегда должны...
Были вопросы и статьи по этому поводу, но, насколько я могу судить, нет ничего убедительного. Лучшее резюме, которое я смог найти, это flex-based позволяет указать начальный / начальный размер элемента, прежде чем что-либо еще будет вычислено. Это может быть процент или абсолютное значение. ... что...
Вот код, который я использую для достижения вышеуказанного макета: .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;...
Как центрировать текст в ReactNative как по горизонтали, так и по вертикали? У меня есть пример приложения в rnplay.org, где justifyContent = "center" и alignItems = "center" не работает: https://rnplay.org/apps/AoxNKQ Текст должен быть в центре. И почему между текстом (желтым) и родительским...
https://jsfiddle.net/vhem8scs/ Можно ли сделать так, чтобы два элемента были выровнены по левому краю, а один - по флексбоксу? Ссылка показывает это более четко. Последний пример - это то, чего я хочу достичь. Во flexbox у меня есть один блок кода. С плавающей точкой у меня есть четыре блока кода....
У меня есть 2 деления бок о бок в flexbox. Правая рука всегда должна быть одинаковой ширины, и я хочу, чтобы левая рука просто занимала оставшееся пространство. Но это не будет, если я специально не установлю его ширину. Таким образом, на данный момент он установлен на 96%, что выглядит нормально,...
Я уже прочитал несколько учебных пособий по Flexbox, но все еще не могу заставить эту простую задачу работать. Как я могу сделать красную коробку до 100% ширины? Код: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text...
Я пытался стилизовать fieldsetэлемент с помощью display: flexи display: inline-flex. Тем не менее, это не сработало: flexвел себя как blockи inline-flexвел себя как inline-block. Это происходит как в Firefox, так и в Chrome, но странным образом это работает в IE. Это ошибка? Я не мог найти, что...
В 3-рядном макете: верхний ряд должен быть измерен согласно его содержанию нижний ряд должен иметь фиксированную высоту в пикселях средний ряд должен расширяться, чтобы заполнить контейнер Проблема заключается в том, что при расширении основного содержимого он разделяет строки верхнего и нижнего...
Я хочу использовать flexbox с некоторым количеством элементов одинаковой ширины. Я заметил, что flexbox распределяет пространство вокруг равномерно, а не само пространство. Например: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div...
Рассмотрим следующий фрагмент: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting...
Я работаю над вложенным макетом flexbox, который должен работать следующим образом: Внешний уровень ( ul#main) - это горизонтальный список, который должен расширяться вправо, когда в него добавляется больше элементов. Если он становится слишком большим, должна быть горизонтальная полоса прокрутки....
Представьте себе следующий макет, где точки представляют пространство между полями: [Left box]......[Center box]......[Right box] Когда я удаляю правую коробку, мне нравится, чтобы центральная коробка все еще была в центре, вот так: [Left box]......[Center box]................. То же самое...
Закрыто . Этот вопрос основан на мнении . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы ответить на него фактами и цитатами, отредактировав этот пост . Закрыто 5 лет назад . Улучшить этот вопрос Я недавно обнаружил, Flexboxкогда искал решение, чтобы...
CodePen: http://codepen.io/anon/pen/RPNpaP . Я хочу, чтобы красное поле было шириной всего 25 см, когда оно отображается бок о бок - я пытаюсь добиться этого, установив CSS внутри этого медиа-запроса: @media all and (min-width: 811px) {...} кому: .flexbox .red { width: 25em; } Но когда я это...
Flexbox имеет такое поведение, когда он растягивает изображения до их естественной высоты. Другими словами, если у меня есть контейнер flexbox с дочерним изображением, и я изменяю ширину этого изображения, высота не изменяется вообще, и изображение растягивается. div { display: flex; flex-wrap:...
У меня есть контейнер <div>с display: flex. У него есть ребенок <a>. Как я могу заставить ребенка выглядеть "встроенным"? В частности, как я могу сделать ширину дочернего элемента определяется его содержимым, а не расширяться до ширины родительского элемента? Что я пробовал: Я установил...
Хотелось бы иметь A Bи Cвыровнять по середине. Как мне Dполностью уйти вправо? ПЕРЕД: ПОСЛЕ: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background:...
У меня есть левый-правый flexbox: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div>...