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

Я хочу использовать flexbox с некоторым количеством элементов одинаковой ширины. Я заметил, что flexbox распределяет пространство вокруг равномерно, а не само пространство. Например: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> Выполнить фрагмент кодаСкрыть результатыРазвернуть …

187 css  flexbox 

Рассмотрим следующий фрагмент: .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 industry </div> <div class="child"> Lorem Ipsum is simply dummy text …

176 css  internet-explorer  flexbox  internet-explorer-11 

Я работаю над вложенным макетом flexbox, который должен работать следующим образом: Внешний уровень ( ul#main) - это горизонтальный список, который должен расширяться вправо, когда в него добавляется больше элементов. Если он становится слишком большим, должна быть горизонтальная полоса прокрутки. #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* …

168 html  css  flexbox 

Представьте себе следующий макет, где точки представляют пространство между полями: [Left box]......[Center box]......[Right box] Когда я удаляю правую коробку, мне нравится, чтобы центральная коробка все еще была в центре, вот так: [Left box]......[Center box]................. То же самое касается, если бы я удалил левую коробку. ................[Center box]................. Теперь, когда содержимое внутри …

162 html  css  flexbox  centering 

Закрыто . Этот вопрос основан на мнении . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы ответить на него фактами и цитатами, отредактировав этот пост . Закрыто 5 лет назад . Улучшить этот вопрос Я недавно обнаружил, Flexboxкогда искал решение, чтобы сделать div одинаковой …

161 html  css  twitter-bootstrap  flexbox 

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 …

160 html  css  flexbox 

Flexbox имеет такое поведение, когда он растягивает изображения до их естественной высоты. Другими словами, если у меня есть контейнер flexbox с дочерним изображением, и я изменяю ширину этого изображения, высота не изменяется вообще, и изображение растягивается. div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" …

158 html  css  flexbox 

У меня есть контейнер <div>с display: flex. У него есть ребенок <a>. Как я могу заставить ребенка выглядеть "встроенным"? В частности, как я могу сделать ширину дочернего элемента определяется его содержимым, а не расширяться до ширины родительского элемента? Что я пробовал: Я установил для ребенка значение display: inline-flex, но оно …

154 html  css  flexbox 

Хотелось бы иметь 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: #ddd; /* magic to throw to …

148 html  css  flexbox 

У меня есть левый-правый 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> Выполнить фрагмент кодаHide resultsРазвернуть фрагмент Проблема в том, что правильный ребенок не ведет себя отзывчиво. Чтобы быть конкретным, я хочу, чтобы он …

141 css  flexbox 

Мне нужно реализовать довольно нестандартную планировку кладки. Однако по ряду причин я не хочу использовать для этого JavaScript. Параметры: Все элементы имеют одинаковую ширину Элементы имеют высоту, которую невозможно вычислить на стороне сервера (изображение плюс различное количество текста) Я могу жить с фиксированным количеством столбцов, если мне нужно есть тривиальное …

134 html  css  flexbox  css-grid 

Как мы все знаем, flexсвойство является обобщающим для flex-grow, flex-shrink, и flex-basisсвойства. Его значение по умолчанию 0 1 auto, что означает flex-grow: 0; flex-shrink: 1; flex-basis: auto; но я заметил, во многих местах flex: 1используется. Это сокращение от 1 1 autoили 1 0 auto? Я не понимаю, что это значит, …

131 css  flexbox 

В этом живом примере можно найти следующий код У меня есть следующий собственный элемент реакции: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here …

124 css  reactjs  react-native  flexbox 

С помощью типичного CSS я мог бы разместить один из двух столбцов влево, а другой вправо с небольшим промежутком между ними. Как мне это сделать с помощью flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid …

123 html  css  flexbox 

Я нашел эту ветку - Как вы растягиваете изображение, чтобы заполнить <div>, сохраняя при этом соотношение сторон изображения? - это не совсем то, что мне нужно. У меня есть div определенного размера и изображение внутри него. Я хочу всегда заполнять div изображением, независимо от того, является ли изображение альбомным или …

120 image  css  positioning  flexbox