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

Для того, щоб встановити мінімальну відстань між елементами Flexbox я використовую margin: 0 5pxна .itemі margin: 0 -5pxна контейнері. Для мене це здається злому, але я не можу знайти кращого способу зробити це. Приклад #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; …

777 css  flexbox 

Чи існує більш зручний спосіб вирівняти "Контакт", ніж використовувати position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a …

681 html  css  flexbox 

Розглянемо головну вісь і поперечну вісь гнучких контейнерів: Джерело: W3C Щоб вирівняти гнучкі елементи по головній осі, є одна властивість: justify-content Для вирівнювання гнучких елементів по поперечній осі є три властивості: align-content align-items align-self На зображенні вище головна вісь горизонтальна, а поперечна вісь - вертикальна. Це типові вказівки flex-контейнера. Однак …

677 css  flexbox  language-lawyer  w3c 

Як центрувати поділ по горизонталі та вертикалі всередині контейнера за допомогою флексокса. У наведеному нижче прикладі я хочу, щоб кожне число розташовувалося один під одним (рядками), по центру якого горизонтально. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } …

670 html  css  flexbox 

Я намагаюся заповнити вертикальний простір гнучких елементів всередині Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div …

458 css  flexbox 

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

441 html  css  html-table  flexbox 

Я хотів би використовувати flexbox для вертикального вирівнювання деякого вмісту всередині, <li>але не маючи великого успіху. Я перевірив в Інтернеті, і багато навчальних посібників насправді використовують обгортковий дів, який отримує align-items:centerз налаштувань flex на батьків, але мені цікаво, чи можна вирізати цей додатковий елемент? Я вирішив використовувати flexbox в цьому …

424 html  css  flexbox 

Я хочу, щоб 3 діви були вирівняні всередині контейнера, подібно до цього: [[LEFT] [CENTER] [RIGHT]] Див контейнера шириною 100% (без встановленої ширини), а центральний поділ повинен залишатися в центрі після зміни розміру контейнера. Тому я встановив: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Але це стає: [[LEFT] [CENTER] ] [RIGHT] Якісь поради?

392 html  css  flexbox  alignment  css-float 

У мене простий макет флеш-коробки з контейнером типу: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Тепер я хочу, щоб елементи в останньому ряду були вирівняні з іншим. justify-content: space-between;слід використовувати, оскільки ширину та висоту сітки можна регулювати. В даний час це виглядає так Тут я хочу, щоб …

378 css  flexbox  grid-layout 

У мене є divкілька дітей: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> і я хочу наступний макет: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | …

374 html  css  flexbox 

Спроба флешбоку нав, який містить до 5 елементів і всього 3, але це не ділення ширини однаково між усіма елементами. Скрипка Підручник, який я моделюю після цього, є http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 0 …

368 html  css  flexbox 

Хтось може мені показати різницю між align-itemsі align-content?

366 css  layout  flexbox  alignment 

Як вирівняти елемент навигації праворуч? Я хочу мати логін та зареєструватися праворуч. Але все, що я намагаюся, здається, не працює. Це те, що я намагався поки що: <div>навколо <ul>з атрибутом:style="float: right" <div>навколо <ul>з атрибутом:style="text-align: right" випробував ці дві речі на <li>тегах спробував усе це знову з !importantдоданим до кінця змінено …

341 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

Я намагаюся вертикально вирівняти елементи в обгортці ідентифікатора. Я надав властивість display:inline-flex;цьому ідентифікатору, оскільки обгортка ID - це контейнер flex. Але різниці в презентації немає. Я очікував, що все в ідентифікаторі обгортки буде відображено inline. Чому це не так? #wrapper { display: inline-flex; /*no difference to display:flex; */ } <body> …

331 css  flexbox 

Я намагаюся зосередити свій контейнер посередині сторінки за допомогою Bootstrap 4. Я поки що не був успішним. Будь-яка допомога буде вдячна. Я створив це на Codepen.io, щоб ви, хлопці, могли пограти з ним, і дайте мені знати, що працює, як я, з ідеї ... Показати фрагмент коду var currentAuthor = …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4