Запитання з тегом «flexbox»

Я намагаюся налаштувати макет флексокса з трьома стовпцями, де лівий і правий стовпці мають фіксовану ширину, а центральний стовпець згинається, щоб заповнити наявний простір. Незважаючи на встановлення розмірів для стовпців, вони все ще здаються зменшуватися, коли вікно скорочується. Хтось знає, як це досягти? Додатковим, що мені потрібно буде зробити, є …

315 html  css  flexbox 

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

312 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 

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

260 html  css  flexbox 

Отож, намагаючись зробити корисний модальний модуль за допомогою flexbox, я виявив те, що, здається, є проблемою із браузером, і мені цікаво, чи існує відоме виправлення чи вирішення - або ідеї, як його вирішити. Те, що я намагаюся вирішити, має два аспекти. По-перше, встановлення модального вікна по центру по вертикалі, яке …

259 html  css  flexbox  browser-bugs 

На цей питання є відповіді на Stack Overflow на російському : елемент Flexbox - перехід на нову строку Чи є спосіб зробити розрив лінії в декількох лініях флексбоксу? Наприклад, для перерви після кожного 3-го елемента в цьому CodePen . .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; …

236 html  css  flexbox 

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

235 css  google-chrome  webkit  flexbox 

Про це були запитання та статті, але, наскільки я можу сказати, нічого переконливого. Найкращий підсумок, який я міг знайти, - це flex-base дозволяє задавати початковий / початковий розмір елемента, перш ніж все інше буде обчислено. Це може бути або відсоткове, або абсолютне значення. ... що саме по собі не багато …

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 = "центр" і alignItems = "центр" не працює: https://rnplay.org/apps/AoxNKQ Текст повинен бути по центру. І чому між текстом (жовтим) та батьківським контейнером є межа у верхній частині? Код: 'use …

212 reactjs  flexbox  react-native 

https://jsfiddle.net/vhem8scs/ Чи можливо два елементи вирівняти ліворуч і один елемент вирівняти праворуч за допомогою флекси? Посилання показує це більш чітко. Останній приклад - те, чого я хочу досягти. У flexbox у мене є один блок коду. З float у мене є чотири блоки коду. Це одна з причин, чому я …

212 css  alignment  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 

У мене є 2 діви поруч у флексі. Права завжди повинна бути однакової ширини, і я хочу, щоб ліва рука просто захопила залишився простір. Але це не стане, якщо я спеціально не встановлю його ширину. Отже, на даний момент він встановлений на 96%, що виглядає нормально, поки ви дійсно не …

203 html  css  flexbox 

Я намагався стилізувати fieldsetелемент з display: flexі display: inline-flex. Однак не вийшло: flexповодився так block, як і inline-flexповодився inline-block. Це трапляється як у Firefox, так і в Chrome, але дивно це працює на IE. Це помилка? Я не міг знайти, що fieldsetповинно мати особливу поведінку, ні в специфікаціях HTML5, ні …

200 html  css  flexbox 

У 3-рядному макеті: верхній ряд має бути розміром відповідно до його вмісту нижній ряд повинен мати фіксовану висоту в пікселях середній ряд повинен розширюватися, щоб заповнити контейнер Проблема полягає в тому, що в міру розширення основного вмісту він стискає рядки заголовка і колонтитула: HTML: <section> <header> header: sized to content …

196 css  layout  flexbox