Questions tagged [flexbox]

1

votes
3

answer
1.8k

Views

force last div on a new line with flexbox [duplicate]

This question already has an answer here: Force flex item to span full row width 2 answers I have this HTML plus this CSS .wrap { display: flex; align-items: center; } .one { flex: 0 1 200px; } .two { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; } .three { display: f...
Happy Andrei
1

votes
1

answer
737

Views

How to set a specific flexbox gap in CSS

I'm trying to achieve a flexbox layout with just one flex-grow element and a variable number of smaller elements around it. I need a gap between the elements that's a fixed width - exactly one pixel. Here's a diagram of what I want: The blue element grows to fill the space, but has a 1px gap in betw...
Jae Kwak
1

votes
2

answer
2.1k

Views

align-content: center not working in Chrome

I am trying to vertically align divs with flexbox, by using the align-content: center. It works fine in Firefox and IE, but it does not vertically align in Chrome. In Chrome the divs stays on top. Title Text. Title Text. Title Text. And CSS: .products-wrapper { width: 100%; min-height: 100vh; /* FLE...
Nifel
1

votes
2

answer
741

Views

React Native - Have view height set by content

I have a view and a scroll view that currently take up the full height due to the flex: 1 property. I'm trying to figure out how the have this view only take up the amount of space that the content within the scroll view takes up. Is this possible? ...
pizza-r0b
1

votes
3

answer
48

Views

How can I align divs correctly to fit page width without overflow?

Okay so I am playing around with flex box, I have created this simple layout of divs but I am evidently formatting them wrong. I have put a div at the top for 100% so you can compare where the divs end. Is there a way to align the divs to fit the page? I thought that simply adding some % width stat...
Shayrapet
1

votes
3

answer
78

Views

Center v-switch inside a v-flex

I would like to center the v-switch element inside a v-flex horizontally and I already tried this here: vuetify center items into v-flex, but it seems not to work for the v-switch element. Whether I wrap it inside a div class like this: Or I use the class directly inside the v-flex: It doesn't work....
saitam
1

votes
4

answer
57

Views

How to make space between elements inside div container

I have a flex-container which will be dynamically filled by elements. Container doesn't have fixed width (I use max-width: max-content;) and can contain as many element as I want. The problem is that I need spacing between these elements, but don't need spacing on the left and right side between an...
Yas'ka
1

votes
0

answer
19

Views

Trying to Create a Flex Box in A Flex Box

I have a footer which is under a section that is already in a flexbox. So, is both a flex-item of the .main flex-box AND it is a flex-container for a separate flex-box made up of the five s as flex-items. I was rtying to using flex column, but the flex box was already created. I'm trying to layout...
Bob
4

votes
4

answer
34

Views

Using Flex trying to get boxes as per images

I am using flex property.I want 1. box to the left and 2.&3. to the right. .flex{ display:flex; flex-wrap:wrap; width:400px; } .flex > div{ flex: 0 0 50%; } .flex .one{ order:1; background: red; } .flex .two{ order:2; background: green; } .flex .three{ order:3; background: blue...
Pullata Praveen
5

votes
1

answer
30

Views

How to keep a window-wide sticky element from scrolling within a wider block?

I'm developing a web interface that involves a lot of scrolling, utilizing sticky positioning, which works beautifully except for one little detail. Below is a minimalist example. You can try it on CodePen to see how the stickies work when scrolling horizontally and vertically. Menu bar item Button...
Martin Laakso
5

votes
3

answer
256

Views

Unable to apply dynamic height on div - Timeline view

I'm trying to build an horizontal timeline. There can be many events on any given day of a month. So, when the events are more, the list items are unable to accommodate the available height(from: min-height) and a vertical scroll is appearing. If I try removing the min-height whole content is dist...
Raviteja
2

votes
2

answer
24

Views

Flex child item disappear on very small widths

I'm buiding a resize component using ReactJS. Code below: class Cell extends React.Component { handleMouseDown = event => { this.props.onMouseDown(this.props.index, event); }; render() { let verticalGrip = ( < div onMouseDown = { this.handleMouseDown } className = 'cell-vertical-grip' / >...
Mendes
1

votes
2

answer
212

Views

How to make a React Native Flexbox StyleSheet object by reusing code from another object

When creating a StyleSheet object in my React Native project, I often want to make a property object that is very similar to another one, with one or two changes. In the past I just copied the object and changed the name and one or two properties, but I always thought there had to be a better solut...
Pedram
1

votes
1

answer
876

Views

Flexbox Layout Pattern: 3 Squares ordered (1 large left, 2 small right stacked) [duplicate]

This question already has an answer here: Left column and stacked right column using flexbox CSS [duplicate] 2 answers I'm trying to achive the following ordered layout with flexbox: HTML: BOX A BOX B BOX C CSS: .box-wrapper{ display:flex; } .boxa{ order: 1; // should be: width: 50%; // should be:...
Maximilian Lindsey
1

votes
2

answer
1.1k

Views

How to make semantic html horizontal definition list with auto width?

Semantic inline definition list in html : Item 1 def. 1 Item 2 def. 2 How to render this in 2 columns using only css (no js) and auto-width each column ? Easy using fixed width or percent width, but I didn't find any solution with auto-width. (I tried flexbox and multicolumns) Any idea ? Thanks
migli
1

votes
3

answer
422

Views

align text to parent's parent

I have a list in an angular-app where each item can either contain a small image (as a div's background -> red) and some text or only text. li { display: flex; border: 1px solid black; width: 80%; margin-bottom: 5%; list-style: none; position: relative; } .text { text-align: center; width:...
user3479074
1

votes
1

answer
328

Views

Flexbox child : any way to reset “display: none”?

Typically I set lengthy menus on my mobile site to an initial display: none and use a Javascript 'Expand' button to switch them back to display: flex (or whatever). But this time around, I can't hide the flex parent. I have to hide only certain flex children, because certain others must be visible....
Lee Saxon
2

votes
2

answer
24

Views

Flex box: Fill remaining space but justify content center

I want to achieve a layout looking like the following: In other words, the last item takes up the 'remaining space' in away that the other items are centered as if item 3 is equally sized to item 1 and 2. The closest I can get to this is this layout: I've also tried setting height: 100% on the las...
Karamell
0

votes
0

answer
17

Views

bootstrap 4 col-sm issue with flex-direction column

A section on the site for col-sm needs to display as columns. In my case for 577767, both the divs are showing as rows and are not taking the full width as well. When i disable the flex-direction: column, only then the two divs show as columns for col-sm. When i change the same to col-med, above be...
learning...
1

votes
2

answer
559

Views

Spacing before and after a horizontal FlatList (React Native)

I'm trying to create a horizontal FlatList that has some spacing around it. I was able to get the beginning spacing correct with paddingLeft on the list, but paddingRight on the list doesn't seem to put any space after it (if I scroll all the way to the end, the last item is pressed right against th...
saadq
1

votes
3

answer
45

Views

Flexbox - Display list vertically instead of wrap

I have a simple flexbox list like this... ul { display:flex; } li { background:red; padding:10px; margin:10px; list-style:none; } List Item 1 List Item 2 List Item 3 List Item 4 List Item 5 When there is not enough room for the list to be displayed horizontally then I would like it to d...
fightstarr20
1

votes
1

answer
34

Views

Why does aligning two flex children to the right fail, while aligning one works?

I have an unordered list with several items. Let's admit is necessary, for whatever reason, for the list to have it's display property set to flex. If I align one item to the right by setting it's margin-left to auto, that works (unsurprisingly): .flex-list { list-style-type: none; margin: 0; p...
Razvan Zamfir
1

votes
2

answer
43

Views

How to align text center - not working in css

I am trying to align text center using below code but its not working. My codepen link and code: body { padding: 0; margin: 0; } .container { width: 1200px; overflow: auto; margin: 240px auto; background: transparent; position: relative; } .container .box { position: relative; float: le...
AbhiRam
1

votes
4

answer
87

Views

How to shrink large flex-box children first?

I want to build a breadcrumb control for a web application. The text in each flex-box child should be truncated whenever the space in the container is not large enough to display everything. The problem is shorter children are shrinked along with larger children and become quickly unreadable. E.g....
bjnwagner
1

votes
2

answer
68

Views

Align items with justify content

I have the next code: div { display: flex; justify-content: space-between; } div li { list-style: none; } .menu li:nth-of-type(1)::after, .menu li:nth-of-type(2)::after, .menu li:nth-of-type(3)::after { font-family: 'Font Awesome 5 Free'; content: '\f111'; display: inline-block; color:...
Asking
1

votes
3

answer
50

Views

No space between columns using the Flex Box Grid system

Using the Flex Box Grid system. What is the correct way of removing the spacing between two 50% width columns? Is there a standard class available for this? I can't find one on the official website. col 1 col 2
Floris
1

votes
2

answer
33

Views

How to display two children in one row and third child in 2nd row

I'm trying to display User ID and the check mark in top row and the text box in 2nd row using flex. I'm unable to do this, so any help is greatly appreciated. This is what I'm getting: User ID This is what I want:
sonnyk2016
1

votes
1

answer
39

Views

How can I accomplish this design with flexbox?

I'm trying to accomplish this design by using flexbox: It's supposed to be a one page website. .container { display: flex; } .big { flex: 2; height: 70vh; background: gray; } .small { flex: 1; height: 70vh; background: gray; } I have no idea how to implement the 'smallest' div to be 25%...
piedude
1

votes
3

answer
42

Views

How to start a new line with a particular item with Flexbox?

This is a very simple exercise but I can't seem to find a neat way to solve it (just started learning about HTML and CSS). I need the 5th block ('bloque 5') in red to be under the other four using Flexbox. The result should be: Could somebody help me with this, please? This is what I have so far: di...
Carolina Zhou Lin
1

votes
1

answer
20

Views

Cannot fit inner image into its parent container on this ReactJS app

I have one very basic ReactJS component called: Designer which displays the Eiffel Tower as well as a bottom panel with some controls in it. The Designer is inside a div with the following size: { width: 510px, height: 300px}. The Eiffel Tower image has the following size: { width: 300px, height: 80...
davidesp
1

votes
1

answer
81

Views

Children do not take the height of parent in IE (Flex model)

Hi I have a parent div main-section and two children div leftContent and rightContent that are placed next to each other. I want the height of the children to be the same as the parent. Also, I want the main-section to take all the vertical space in the page in case the content in the main-section i...
Archit Arora
1

votes
0

answer
125

Views

How to implement a flexbox layout with aria-friendly arrow-based keyboard shortcuts

For accessibility purposes, when using a grid for presentation (e.g. YouTube.com's homepage; as opposed to using it for tabular data) a role of grid and gridcell are applied to the collection and individual items, respectively(1). In addition, aria specifies that the grid should be able to be navi...
MetaSean
1

votes
0

answer
64

Views

Flexbox - move middle element to the next line (without media query)

What I want to achieve (but without the media query): JsFiddle @media all and (max-width: 600px) { #wrapper { flex-wrap:wrap; height: 100px; } .center { width: 100%; order: 3; } .left{ width: 50%; } .right { width:50%; order:2; } } I have 3 elements inside a wrapper, all shrinked. At desktop size, t...
Kres
1

votes
0

answer
113

Views

Angular material 5 card not render properly

I am trying to render 3 card in row using Angular material (version-5) and flex But it not render properly ,from the 2nd row cards are touch each other.following this doc Angular flex Layout. Thanks ipsum dolor sit amet consectetur, adipisicing elit. quasi? Dicta nobis aut velit! {{item.title}} exp...
Nikse
1

votes
1

answer
453

Views

Can't vertically center content with Flexbox on IE11

So, i'm triyng´to vertically center 2 divs with flexbox, it centers on all major browsers but it doesn't center properly on IE11. Searching about this i found that there's a problem centering divs with min-height, but i'm not using it, so i don't know what is wrong or missing. JSFiddle .container {...
Gabriel Souza
1

votes
1

answer
67

Views

Creating responsive flexbox layout containing images in a certain pattern

I am trying to create a responsive layout containing images using flexbox. I have achieved the pattern that I want to but it is not responsive. Following is the pattern: https://jsfiddle.net/wcep5tuk/16/embedded/result/ Even though the pattern looks okay, upon resizing the window, everything falls a...
John Smith
1

votes
2

answer
313

Views

Scrollable content in a mixed of table and flexbox layout

Please see this jsfiddle. I would like to have the table's 1st column respect its 90% width and have the user scroll left/right through items 1 to 3. The with 'more' should always be displayed and not be part of the scroll. In other words, I want to make the table's cell scroll. How can I make th...
Jeff Matthews
1

votes
0

answer
36

Views

CSS: Background-image fails to load properly when using flexbox

I'm trying to use flexbox to make a 'sticky' footer, and it works fine on other pages, but on the page that has a form, the background image fails to load. This problem only appears when using flexbox. Without it, everything loads as normal. I've tried using browser prefixes. When the page loads, i...
BKA
1

votes
1

answer
106

Views

React Native: flex - move content to far right

I'm trying to move the selection text to the far right on this Detail component. I've tried justifyContent on the View with the sideBySide style and alignSelf on the selectionStyle. I've tried various combinations but am not able to move the selection text to the far right, up until where the arrow...
Turnipdabeets
1

votes
1

answer
779

Views

Work-around for Styled-component not working on Internet Explorer 11

I have styled-components on my web-app. They work great. Except on Internet Explorer 11. They completely break and the layout is just a pile of components laying there horizontally instead of the flexbox and whatnot. What is the usual way to work around this problem? Should I somehow recognize in th...
Steve Waters

View additional questions