Запитання з тегом «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> Виконати …

186 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 

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

167 html  css  flexbox 

Уявіть наступний макет, де крапки представляють простір між полями: [Left box]......[Center box]......[Right box] Коли я виймаю правий ящик, мені подобається, що центральний ящик все ще знаходиться в центрі, як-от так: [Left box]......[Center box]................. Те саме стосується, якщо я видаляю ліве поле. ................[Center box]................. Тепер, коли вміст у центральній коробці стане …

162 html  css  flexbox  centering 

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

161 html  css  twitter-bootstrap  flexbox 

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

156 html  css  flexbox 

У мене є контейнер <div>з display: flex. У неї є дитина <a>. Як я можу змусити дитину виглядати "встромленою"? Зокрема, як я можу зробити ширину дитини залежно від її вмісту, а не розширити до ширини батьків? Що я спробував: Я налаштував дитину display: inline-flex, але вона все-таки зайняла всю ширину. …

154 html  css  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 Будь-яка ідея, …

149 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 …

147 html  css  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> Виконати фрагмент кодуСховати результатиРозгорніть фрагмент Проблема полягає в тому, що правильна дитина не веде себе чуйно. Щоб бути конкретним, я хочу, щоб він …

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? Я не можу зрозуміти, …

129 css  flexbox 

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

122 html  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 …

122 css  reactjs  react-native  flexbox 

Я знайшов цю тему - Як ви розтягуєте зображення, щоб заповнити <div>, зберігаючи співвідношення сторін зображення? - це не зовсім та річ, яку я хочу. У мене є діва з певним розміром і зображенням всередині нього. Я хочу завжди заповнювати зображення разом із зображенням незалежно від того, чи зображення є …

120 image  css  positioning  flexbox