Questions tagged [flexbox]
CSS module for flexible layouts providing a broad range of options for aligning elements while eliminating the need for floats and tables.
flexbox
22,506
questions
1522
votes
40
answers
2.6m
views
How do I set distance between flexbox items?
To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. This seems like a hack. Is there another property or method intended to accomplish ...
- 16k
1291
votes
41
answers
497k
views
How to remove the space between inline/inline-block elements?
There will be a 4 pixel wide space between these span elements:
span {
display: inline-block;
width: 100px;
background-color: palevioletred;
}
<p>
<span> Foo </span>
&...
- 185k
1110
votes
5
answers
432k
views
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Consider the main axis and cross axis of a flex container:
Source: W3C
To align flex items along the main axis there is one property:
justify-content
To align flex items along the cross axis there ...
- 364k
983
votes
14
answers
1.3m
views
How to Right-align flex item?
Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute?
.main {
display: flex;
}
.a,
.b,
.c {
background: #efefef;
border: 1px solid #999;
}
.b {
...
- 14k
980
votes
14
answers
1.8m
views
Flexbox: center horizontally and vertically
How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally.
.flex-container ...
- 58.3k
899
votes
15
answers
1.5m
views
How can I make Flexbox children 100% height of their parent?
I'm trying to fill the vertical space of a flex item inside a Flexbox.
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: row;
}
.flex-1 {
width: 100px;
...
- 9,491
748
votes
15
answers
346k
views
What's the difference between align-content and align-items?
What is the difference between align-items and align-content?
- 7,611
694
votes
12
answers
1.1m
views
Align an element to bottom with flexbox
I have a div with some children:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="...
- 14.4k
655
votes
14
answers
1.1m
views
How to vertically align text inside a flexbox?
I would like to use flexbox to vertically align some content inside an <li> but not having great success.
I've checked online and many of the tutorials actually use a wrapper div which gets the ...
- 16.2k
577
votes
10
answers
699k
views
What's the difference between display:inline-flex and display:flex?
I am trying to vertically align elements within an ID wrapper. I gave the property display:inline-flex; to this ID as the ID wrapper is the flex container.
But there is no difference in presentation. ...
- 7,001
576
votes
38
answers
340k
views
Flex-box: Align last row to grid
I have a simple flex-box layout with a container like:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
Now I want the items in the last row to be aligned with the ...
- 12.7k
575
votes
7
answers
186k
views
Why don't flex items shrink past content size?
I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property.
I ...
- 5,859
566
votes
3
answers
760k
views
Fill the remaining height or width in a flex container
I have 2 divs side-by-side in a flexbox. The right hand one should always be the same width, and I want the left hand one to just grab the remaining space. But it won't unless I specifically set its ...
- 8,300
556
votes
6
answers
521k
views
Flexbox not giving equal width to elements
Attempting a flexbox nav that has up to 5 items and as little as 3, but it's not dividing the width equally between all the elements.
Fiddle
The tutorial I'm modeling this after is http://www....
- 8,852
549
votes
14
answers
721k
views
How to make Flexbox items the same size
I want to use Flexbox that has some number of items that are all the same width. I've noticed that Flexbox distributes the space around evenly, rather than the space itself.
For example:
.header {
...
- 19.4k
518
votes
10
answers
912k
views
Flexbox: 4 items per row
I'm using a flex box to display 8 items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?
Here is a relevant snip:
(Or if you prefer ...
- 9,441
510
votes
13
answers
123k
views
Can't scroll to top of flex item that is overflowing container
In attempting to make a useful modal using flexbox, I found what seems to be a browser issue and am wondering if there is a known fix or workaround -- or ideas on how to resolve it.
The thing I'm ...
- 5,972
497
votes
20
answers
998k
views
Vertical Align Center in Bootstrap 4 [duplicate]
I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.
I have built it at Codepen.io so you guys can play ...
- 6,848
484
votes
24
answers
891k
views
Bootstrap align navbar items to the right
How do I align a navbar item to right?
I want to have the login and register to the right.
But everything I try does not seem to work.
This is what I have tried so far:
<div> around the <...
- 6,778
441
votes
7
answers
433k
views
How can I align one item right with flexbox?
https://jsfiddle.net/vhem8scs/
Is it possible to have two items align left and one item align right with flexbox? The link shows it more clearly. The last example is what I want to achieve.
In ...
- 24.3k
424
votes
6
answers
300k
views
How to justify a single flexbox item (override justify-content) [duplicate]
You can override align-items with align-self for a flex item.
I am looking for a way to override justify-content for a flex item.
If you had a flexbox container with justify-content:flex-end, but you ...
- 6,689
397
votes
10
answers
585k
views
How to specify line breaks in a multi-line flexbox layout?
Is there a way to make a line break in multiple line flexbox?
For example to break after each 3rd item in this CodePen.
.container {
background: tomato;
display: flex;
flex-flow: row ...
- 7,739
373
votes
12
answers
201k
views
Center one and right/left align other flexbox element
I would like to have A B and C aligned in the middle.
How can I get D to go completely to the right?
BEFORE:
AFTER:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
...
- 3,808
371
votes
6
answers
151k
views
What are the differences between flex-basis and width?
There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is
flex-basis allows you to specify the initial/starting size of the ...
- 5,540
370
votes
4
answers
300k
views
How can I have two fixed width columns with one flexible column in the center?
I'm trying to set up a flexbox layout with three columns where the left and right columns have a fixed width, and the center column flexes to fill the available space.
Despite setting up dimensions ...
- 30k
366
votes
13
answers
152k
views
Keep the middle item centered when side items have different widths
Imagine the following layout, where the dots represent the space between the boxes:
[Left box]......[Center box]......[Right box]
When I remove the right box, I like the center box to still be in ...
- 17.8k
366
votes
6
answers
430k
views
Fill remaining vertical space with CSS using display:flex
In a 3-row layout:
the top row should be sized according to its contents
the bottom row should have a fixed height in pixels
the middle row should expand to fill the container
The problem is that as ...
- 9,216
355
votes
13
answers
656k
views
Scrolling a flexbox with overflowing content
Here's the code I'm using to achieve the above layout:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
...
- 218k
344
votes
22
answers
517k
views
ReactNative: how to center text?
How to center Text in ReactNative both in horizontal and vertical?
I have an example application in rnplay.org where justifyContent="center" and alignItems="center" is not working:
...
- 12.2k
335
votes
11
answers
326k
views
Prevent flex items from overflowing a container
How do I make my flex item (article in this example), which has flex-grow: 1; not to overflow its flex parent/container (main)?
In this example article is just text, though it might contains other ...
- 43.2k
324
votes
28
answers
478k
views
React native text going off my screen, refusing to wrap. What to do?
The following code can be found in this live example
I've got the following react native element:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
...
- 22.5k
308
votes
3
answers
327k
views
Make flex items take content width, not width of parent container
I have a container <div> with display: flex. It has a child <a>.
How can I make the child appear "inline"?
Specifically, how can I make the child's width determined by its content, ...
- 62.5k
306
votes
2
answers
381k
views
Position last flex item at the end of container
This question concerns a browser with full css3 support including flexbox.
I have a flex container with some items in it. They are all justified to flex-start but I want the last .end item to be ...
- 121k
303
votes
5
answers
239k
views
Chrome / Safari not filling 100% height of flex parent
I want to have a vertical menu with a specific height.
Each child must fill the height of the parent and have middle-aligned text.
The number of children is random, so I have to work with dynamic ...
- 5,775
290
votes
12
answers
358k
views
100% width in React Native Flexbox
I have already read several flexbox tutorial, but I still cannot make this simple task to work.
How can I make the red box to 100% width?
Code:
<View style={styles.container}>
<Text ...
- 3,155
288
votes
4
answers
421k
views
How to set a fixed width column with CSS flexbox
I want the red box to be only 25 em wide when it's in the side-by-side view - I'm trying to achieve this by setting the CSS inside this media query:
@media all and (min-width: 811px) {...}
to:
....
- 3,025
278
votes
11
answers
371k
views
What does flex: 1 mean?
As we all know, the flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. Its default value is 0 1 auto, which means
flex-grow: 0;
flex-shrink: 1;
flex-basis: ...
- 5,440
277
votes
9
answers
188k
views
My position: sticky element isn't sticky when using flexbox
I was stuck on this for a little bit and thought I'd share this position: sticky + flexbox gotcha:
My sticky div was working fine until I switched my view to a flex box container, and suddenly the ...
- 12.7k
262
votes
2
answers
392k
views
Equal height rows in CSS Grid Layout
I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid?
To be clear, I ...
- 3,661
251
votes
4
answers
456k
views
How to stretch children to fill cross-axis?
I have a left-right flexbox:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 70vh;
min-height: 325px;
max-height:570px;
}
.wrapper>....
- 2,986
246
votes
5
answers
79k
views
CSS-only masonry layout
I need to implement a masonry layout. However, for a number of reasons I don't want to use JavaScript to do it.
Parameters:
All elements have the same width
Elements have a height that cannot be ...
- 447k
239
votes
7
answers
61k
views
Why can't <fieldset> be flex containers?
I tried to style a fieldset element with display: flex and display: inline-flex.
However, it didn't work: flex behaved like block, and inline-flex behaved like inline-block.
This happens both on ...
- 284k
237
votes
9
answers
171k
views
Why does flexbox stretch my image rather than retaining aspect ratio?
Flexbox has this behaviour where it stretches images to their natural height. In other words, if I have a flexbox container with a child image, and I resize the width of that image, the height doesn't ...
- 3,984
234
votes
4
answers
293k
views
Making a flex item float right
I have a
<div class="parent">
<div class="child" style="float:right"> Ignore parent? </div>
<div> another child </div>
</div>
The parent has
.parent {
...
- 7,848
234
votes
9
answers
88k
views
When flexbox items wrap in column mode, container does not grow its width
I am working on a nested flexbox layout which should work as follows:
The outermost level (ul#main) is a horizontal list that must expand to the right when more items are added to it. If it grows too ...
- 19.1k
229
votes
5
answers
264k
views
How to specify an element after which to wrap in css flexbox? [duplicate]
I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list ...
- 9,819
206
votes
17
answers
483k
views
Equal height rows in a flex container
As you can see, the list-items in the first row have same height. But items in the second row have different heights. I want all items to have a uniform height.
Is there any way to achieve this ...
- 9,298
200
votes
2
answers
234k
views
Prevent flex items from stretching
Sample:
div {
display: flex;
height: 200px;
background: tan;
}
span {
background: red;
}
<div>
<span>This is some text.</span>
</div>
I have two ...
- 7,778
198
votes
13
answers
124k
views
Text in a flex container doesn't wrap in IE11
Consider the following snippet:
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
}...
- 170k
195
votes
5
answers
305k
views
How to align flexbox columns left and right?
With typical CSS I could float one of two columns left and another right with some gutter space in-between. How would I do that with flexbox?
http://jsfiddle.net/1sp9jd32/
#container {
width: ...
- 3,665