Code Snippets » CSS »
A Complete G uide to Flexbox
BY C HR IS COY IER LAST UPDATED ON MARCH 21, 2017
FIND YOUR
OPPORTUNITY
FL EXBOX
Background
Basics & Terminology
container
F ront- En d Job s
abo ut.m e is hiring a Product Designer
P rope rtie s fo r the Pa rent
O rbital In sight is hiring a Front End Engineer
C e rne r C o rpo ration is hiring a Entry Level
Software Developer
(flex containe r)
SEE MORE JOBS
POST A JOB
# display
This defines a flex container; inline or block depending on the
given value. It enables a flex context for all its direct children.
SIGN UP NOW!
CSS
.container {
display: flex; /* or inline-flex */
}
Note that CSS columns have no effect on a flex container.
# flex-direction
This establishes the main-axis, thus defining the direction flex
items are placed in the flex container. Flexbox is (aside from
optional wrapping) a single-direction layout concept. Think of
converted by Web2PDFConvert.com
flex items as primarily laying out either in horizontal rows or
vertical columns.
CSS
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row (default): left to right in ltr ; right to left in rtl
row-reverse : right to left in ltr ; left to right in rtl
column : same as row but top to bottom
column-reverse : same as row-reverse but bottom to top
# flex-wrap
By default, flex items will all try to fit onto one line. You can
change that and allow the items to wrap as needed with this
property.
CSS
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap (default): all flex items will be on one line
wrap : flex items will wrap onto multiple lines, from top
to bottom.
wrap-reverse : flex items will wrap onto multiple lines
from bottom to top.
There are some visual demos of flex-wrap here.
# flex-flow
(Applies to: parent flex
container element)
This is a shorthand flex-direction and flex-wrap properties, which
together define the flex container's main and cross axes.
Default is row nowrap .
converted by Web2PDFConvert.com
CSS
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
# justify-content
flex-start
flex-end
center
space-between
space-around
This defines the alignment along the main axis. It helps
distribute extra free space left over when either all the flex
items on a line are inflexible, or are flexible but have reached
their maximum size. It also exerts some control over the
alignment of items when they overflow the line.
CSS
.container {
justify-content: flex-start | flex-end | center | space-between | space-around
}
flex-start (default): items are packed toward the start line
flex-end : items are packed toward to end line
center : items are centered along the line
space-between : items are evenly distributed in the line;
first item is on the start line, last item on the end line
space-around : items are evenly distributed in the line
with equal space around them. Note that visually the
spaces aren't equal, since all the items have equal space
on both sides. The first item will have one unit of space
against the container edge, but two units of space
between the next item because that next item has its own
converted by Web2PDFConvert.com
spacing that applies.
# align-items
flex-start
flex-end
center
stretch
baseline
text text
text text
text text
text text
This defines the default behaviour for how flex items are laid out
along the cross axis on the current line. Think of it as the justifycontent version for the cross-axis (perpendicular to the mainaxis).
CSS
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start : cross-start margin edge of the items is placed
on the cross-start line
flex-end : cross-end margin edge of the items is placed on
the cross-end line
center : items are centered in the cross-axis
baseline : items are aligned such as their baselines align
stretch (default): stretch to fill the container (still
respect min-width/max-width)
# align-content
converted by Web2PDFConvert.com
flex-start
flex-end
center
stretch
space-between
space-around
This aligns a flex container's lines within when there is extra
space in the cross-axis, similar to how justify-content aligns
individual items within the main-axis.
Note: this property has no effect when there is only one line of
flex items.
CSS
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch
}
flex-start : lines packed to the start of the container
flex-end : lines packed to the end of the container
center : lines packed to the center of the container
space-between : lines evenly distributed; the first line is at
the start of the container while the last one is at the end
space-around : lines evenly distributed with equal space
around each line
stretch (default): lines stretch to take up the remaining
space
items
converted by Web2PDFConvert.com
P rope rtie s fo r the
Children
(flex items)
# order
By default, flex items are laid out in the source order. However,
the order property controls the order in which they appear in
the flex container.
CSS
.item {
order: ;
}
# flex-grow
1
1
1
2
1
1
This defines the ability for a flex item to grow if necessary. It
accepts a unitless value that serves as a proportion. It dictates
what amount of the available space inside the flex container
the item should take up.
If all items have flex-grow set to 1, the remaining space in the
container will be distributed equally to all children. If one of the
children has a value of 2, the remaining space would take up
twice as much space as the others (or it will try to, at least).
CSS
.item {
flex-grow: ; /* default 0 */
}
Negative numbers are invalid.
# flex-shrink
This defines the ability for a flex item to shrink if necessary.
converted by Web2PDFConvert.com
CSS
.item {
flex-shrink: ; /* default 1 */
}
Negative numbers are invalid.
# flex-basis
This defines the default size of an element before the
remaining space is distributed. It can be a length (e.g. 20%,
5rem, etc.) or a keyword. The auto keyword means "look at my
width or height property" (which was temporarily done by the
main-size keyword until deprecated). The content keyword
means "size it based on the item's content" - this keyword isn't
well supported yet, so it's hard to test and harder to know what
its brethren max-content , min-content , and fit-content do.
CSS
.item {
flex-basis: | auto; /* default auto */
}
If set to 0 , the extra space around content isn't factored in. If
set to auto , the extra space is distributed based on its flex-grow
value. See this graphic.
# flex
This is the shorthand for flex-grow, flex-shrink and flex-basis
combined. The second and third parameters ( flex-shrink and
flex-basis ) are optional. Default is 0 1 auto .
CSS
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
It i s recommen de d that yo u use thi s sho rthan d p rope rty
rather than set the individual properties. The short hand sets
the other values intelligently.
# align-self
converted by Web2PDFConvert.com
flex-start
flex-end
This allows the default alignment (or the one specified by alignitems ) to be overridden for individual flex items.
Please see the align-items explanation to understand the
available values.
CSS
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch
}
Note that float , clear and vertical-align have no effect on a
flex item.
#
Examples
Let's start with a very very simple example, solving an almost daily
problem: perfect centering. It couldn't be any simpler if you use
flexbox.
CSS
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
This relies on the fact a margin set to `auto` in a flex container absorb
extra space. So setting a vertical margin of auto will make the item
perfectly centered in both axis.
Now let's use some more properties. Consider a list of 6 items, all with a
fixed dimensions in a matter of aesthetics but they could be auto-sized.
We want them to be evenly and nicely distributed on the horizontal axis
so that when we resize the browser, everything is fine (without media
converted by Web2PDFConvert.com
queries!).
CSS
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}
Done. Everything else is just some styling concern. Below is a pen
featuring this example. Be sure to go to CodePen and try resizing your
windows to see what happens.
See the Pen Demo Flexbox 1 by CSS-Tricks (@css-tricks) on CodePen.
Let's try something else. Imagine we have a right-aligned navigation
on the very top of our website, but we want it to be centered on mediumsized screens and single-columned on small devices. Easy enough.
converted by Web2PDFConvert.com
CSS
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}
See the Pen Demo Flexbox 2 by CSS-Tricks (@css-tricks) on CodePen.
Let's try something even better by playing with flex items flexibility!
What about a mobile-first 3-columns layout with full-width header and
footer. And independent from source order.
converted by Web2PDFConvert.com
CSS
.wrapper {
display: flex;
flex-flow: row wrap;
}
/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
flex: 1 100%;
}
/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. nav
* 3. main
* 4. aside
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
See the Pen Demo Flexbox 3 by CSS-Tricks (@css-tricks) on CodePen.
P refixing Flexbox
converted by Web2PDFConvert.com
Related P roperties
Other Resources
Bugs
#
Browser S upport
Broken up by "version" of flexbox:
(new) means the recent syntax from the specification (e.g.
display: flex; )
(tweener) means an odd unofficial syntax from 2011 (e.g. display:
flexbox; )
(old) means the old syntax from 2009 (e.g. display: box; )
Safari:
Chrome:
3.1+
20- (old)
(old)
21+
6.1+
(new)
(new)
Firefox:
2-21
(old)
22+
(new)
Opera:
12.1+
(new)
Android:
IE: 10
2.1+
(tweener)
(old)
11+
4.4+
(new)
(new)
iOS:
3.2+
(old)
7.1+
(new)
Blackberry browser 10+ supports the new syntax.
For more informations about how to mix syntaxes in order to get the
best browser support, please refer to this article (CSS-Tricks) or this
article (DevOpera).
Comment s
Reply ↓
Bill Webb
#A P R I L
8 ,
2 0 1 3
Yay. Less javasc ript an d mo re CSS. What’s not to like? G reat info, as
always!
Alex
#J U L Y
1 7 ,
2 0 1 4
Flexbox its fine, b ut It is still not valid fo r a simple perfect
“pro duct g rid” with no margin s at first an d last elements in ro w,
an d left aligned. Otherwise: co uld yo u b uild this layo ut using
flexbox? http://i.snag.gy/V HJ sV.jpg thanks
La wrence Botha
#J U L Y
2 0 ,
2 0 1 4
@Alex Yes, yo u can. In the same manner that yo u do so with nonflex g rids, apply a negative margin-left to the g rid wrapper, an d
apply that same value as padding left to all g rid column s.
converted by Web2PDFConvert.com
.grid { margin-left: -20px;}
.grid__col { padding-left: 20px;}
Look at http://in uitc ss.com fo r ho w it’s done with inline-block
elements, which allo ws yo u to apply vertical alignment to
column s, too.
my st rdat
#J U L Y
2 3 ,
2 0 1 4
@Alex @Lawrence That has little do with flexbox itself.
.el:not(:last-of-type) an d similar exclusion selecto rs. Negative
margin s are rubbish.
La wrence Botha
#A U G U S T
2 ,
2 0 1 4
@mystrdat Yo u’re co rrect, it has nothing to do with flexbox.
U sing :not selecto rs, ho wever, will be un scalable, an d yo u will lo se
IE8 suppo rt (less of an issue no w).
If I have a g rid with 8 item s, each occ upying 25% of the width,
that techniq ue fails, since the 4th item will not sit flush with the
container edges.
If I have a g rid with 4 item s, 25% width on desktop, an d then 50%
width on mobile, that technique fails again, fo r the above
reason. Ho w abo ut managing 3rds, 5th s, 6th s, 12fth s, etc., an d
when column s change to use different width s ac ro ss viewpo rts?
I wo uldn’t call negative margin s rubbish. Perhaps not ideal, but
they solve a complex problem elegantly.
http://tympan us.net/co drops/ 2013/ 02/ 04/c reatingnestable-dynamic-g rids/
Ya zin
#A U G U S T
2 4 ,
2 0 1 4
@Alex .. actually, it’s alot simpler. J ust use
justify-content: space-between;
Mo re here
Ab dul
#M A R C H
1 4 ,
2 0 1 5
Matt
#A P R I L
3 ,
2 0 1 5
The CSS Wo rking G ro up has a doc ument online of “…Mistakes
in the Design of CSS”, one of them is this:
“Flexbox sho uld have been less c razy abo ut flex-basis vs
converted by Web2PDFConvert.com
width/height. Perhaps: if width/height is auto, use flex-basis;
otherwise, stick with width/height as an inflexible size. (This also
makes min/max width/height behavio r fall o ut of the generic
definition.)”
Can yo u talk abo ut what they mean by this?
macgal
#A P R I L
2 3 ,
2 0 1 5
Ahojj
dAV IT dJATKO
#A P R I L
2 3 ,
2 0 1 5
J sem vadnej co s tym?
o NDTR EJ kO NRÁT
#A P R I L
2 3 ,
2 0 1 5
A sy b utu b rec zet
Jo sh McC ullo ugh
#J U L Y
6 ,
2 0 1 5
Fo r yo ur final example, ho w wo uld yo u make the content (center
ro w) take up all available space, so that at minim um, the footer
is pinned to the bottom of the win do w – b ut if the content area
has mo re content, the footer will push belo w, allo wing sc rolling.
This can be accomplished by setting a min-height on the
content ro w: calc( 100% – header-height – footer-height) b ut it
requires hard-co ding o r JS to accomplish AFA IK.
Alan ca rpente r
#A U G U S T
1 2 ,
2 0 1 5
@Lawrence at the point of using flex does IE8 not become a
problem already? I think the g rid solution co uld be solved with
nth-child. Then using media q ueries to make appropriate
adjustments based on the users sc reen.
An dy Maleh
#A U G U S T
1 8 ,
2 0 1 5
Perfect P ro duct Flexbox Layo ut ( using justify-content: spacebetween an d filler pro ducts):
See the Pen Aligned Ro w W rap Flexbox by An dy Maleh
( @An dyMaleh) on Co dePen.
Tho ugh to be honest, I don’t like that I had to use fillers fo r the
Flexbox implementation to en sure the last ro w is spaced evenly.
It wo uld be mighty nice if they offer Flexbox ro w selecto rs fo r
converted by Web2PDFConvert.com
m ulti-ro w wrap flo ws.
Here is an alternative implementation with display inline-block:
See the Pen Aligned Ro w W rap Inline-Block Layo ut by An dy
Maleh ( @An dyMaleh) on Co dePen.
Nafi s
#S E P T E M B E R
2 2 ,
2 0 1 5
Not wo rking on iPad, iPhone, desktop safari also. Any solution?
Hube rt Huben dubel
#O C T O B E R
2 3 ,
2 0 1 5
Yo ur last example only wo rks with no content. If yo u put some
text in A side1 the 3 column Layo ut is gone.
Pa ulOB
#O C T O B E R
2 3 ,
2 0 1 5
@Hubert: Yes the 3 col layo ut needs this added.
@media all and (min-width: 600px) {
.aside {
flex: 1 0 0;
}
}
I mentioned it a while ago in an earlier po st an d assumed
someone wo uld update the demo.;)
Ka zi
#J A N U A R Y
1 2 ,
2 0 1 6
@Jo sh McCullo ugh its pretty simple to achieve that, better an d
easier then ever befo re. J ust use the flex property an d set it to 1,
fo r e.g:
.someClass {
flex: 1;
color: #ebebeb;
padding: 2rem;
}
flex is a very po werf ul property an d can be used in the sho rthan d
of flex: 1 1 auto; (g ro w, sh rink an d basis) – using just flex: 1 tells it
to take all the remaining space th us making the footer stick at
the bottom. Look an eye o ut fo r g rid to make a proper entry into
the b ro wsers an d we wo uld be having magic on o ur plates in
converted by Web2PDFConvert.com
term s of layo uts.
See it live in action:
Result
Anonymous Pens can't be embedded.
Edit on CodePen
Alex 2
#M A R C H
2 5 ,
2 0 1 6
Well, it’s bad on many levels. Too verbo se, hard to manage, it
already c reates “f ramewo rks” aro un d it, just to make it
manageable. 25 years ago we already had tools, WYS IW IG ID E’s
an d ways to define U I an d “ respon sive” views… Fo r geeze sake,
can we come back to roots an d come up with simple an d
effective markup lang uage with U I tools an d plain resizing rules
fo r view elements!?
Ch ri s
#A P R I L
2 6 ,
2 0 1 6
Regarding the flex property:
Saying that the 2n d an d 3rd parameters an d are optional is slightly misleading because it implies that
(the 1st parameter) is never optional. The truth is,
is optional as long as is present (an d
obvio usly when the value is none ). It’s only req uired when is present.
Ch ri s
#A P R I L
2 6 ,
2 0 1 6
oops, so rry, my comment was fo r the whole board, not just to
yo ur po st.
K uhan
#M A Y
1 0 ,
2 0 1 6
when this article an d aside come as html tag , I never kno w this
converted by Web2PDFConvert.com
Genna dy
#A U G U S T
2 4 ,
2 0 1 6
#include
#include
#include
using namespace std;
float area(float a, float b, float c)
{
float s = (a + b + c) / 2;
return sqrt(s * (s-a) * (s-b) * (s-c));
}
int main()
{
int T;
float WX, WY, WZ, XY, XZ, YZ,
radius, volume, surfaceArea,
a, b, c, d, u, v, w, x, y, z, U, V, W, X, Y, Z;
ios_base::sync_with_stdio(false);
cout << fixed;
cin >> T;
while (T--)
{
cin >> WX >> WY >> WZ >> XY >> XZ >> YZ;
u = WX;
v = WY;
w = WZ;
U = YZ;
V = XZ;
W = XY;
x = (U - v + w) * (v - w + U);
y = (V - w + u) * (w - u + V);
z = (W - u + v) * (u - v + W);
X = (w - U + v) * (U + v + w);
Y = (u - V + w) * (V + w + u);
Z = (v - W + u) * (W + u + v);
a = sqrt(x * Y * Z);
b = sqrt(y * Z * X);
c = sqrt(z * X * Y);
converted by Web2PDFConvert.com
d = sqrt(x * y * z);
volume = sqrt((-a + b + c + d)
* (a - b + c + d)
* (a + b - c + d)
* (a + b + c - d))
/ (192 * u * v * w);
surfaceArea = area(WX, WY, XY)
+ area(WX, WZ, XZ)
+ area(WY, WZ, YZ)
+ area(XY, XZ, YZ);
radius = 3 * volume / surfaceArea;
cout << setprecision(4) << radius << "\n";
}
return 0;
}
Skythe
#S E P T E M B E R
9 ,
2 0 1 6
@Yazin
That’s not co rrect. Space-between wo uld spread all item s in the
last ro w ac ro ss the whole width which is not what Alex wanted.
hi
#O C T O B E R
1 0 ,
2 0 1 6
Yo ur example specifies .main { flex: 2 0px; } b ut yo ur co depen uses
.main { flex: 3 0px; } .
This really th rew me off fo r a while… won dering why the boxes
werent the width s I expected. :p
G reat article, thanks.
San deep Joel
#D E C E M B E R
2 3 ,
2 0 1 6
Reply ↓
Jacob D ubail
#A P R I L
1 2 ,
2 0 1 3
Hey Ch ris,
Thank yo u so m uch fo r the comprehen sive write up.
I just updated Firefox to v20 on a mac an d no w all of the flex-box
demo s aren’t wo rking. Everything still looks g reat in Ch rome.
converted by Web2PDFConvert.com
Anyone else having this problem?
An drea s
#M A Y
4 ,
2 0 1 4
Issues with Ch 34.0.1847 on OSX 10.9.2
Thanks fo r the writeup Ch ris!
sl 01k
#M A Y
1 4 ,
2 0 1 4
FF 2-21 (old) – (old) mean s the old syntax f rom 2009 (e.g.
display: box;)
Robe rt Fa uve r
#M A Y
1 5 ,
2 0 1 4
The demo s are using the new flexbox spec s which req uires FF 22+
Pete r Lo rd
#M A Y
1 8 ,
2 0 1 4
Not wo rking fo r me on ubuntu 14.04 with firefox 29
Reply ↓
Coolcat 007
#A P R I L
1 3 ,
2 0 1 3
The only thing I don’t un derstan d is why the use of prefixes is needed
if the syntax doesn’t differ f rom the recommen dation.
I think what wo uld be eno ugh is ( using the above example):
converted by Web2PDFConvert.com
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
.item {
-webkit-box-flex: 1 200px;
-moz-box-flex: 1 200px;
flex: 1 200px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
order: 2;
}
At the moment this is not suppo rted, b ut I think it sho uld be because
everything that was left o ut here had the recommen ded syntax. The
prefixes still sho uld be available if needed, b ut it sho uldn’t be
necessary.
Tom L
#A U G U S T
1 ,
2 0 1 4
Goo d explanation of the need fo r m ultiple ven do r prefixed rules
here:
http://c ss-tricks.com/ using-flexbox/
See co de examples with comments…
Billy Wenge-M urphy
#O C T O B E R
2 3 ,
2 0 1 4
Ven do r prefixes aren’t just abo ut syntax differences. They
(arg uably m uch mo re impo rtantly) separate o ut
implementation differences. What wo uld happen if we just had
one unprefixed wo rd fo r a feature, an d the syntax of its attrib utes
was con sistent ac ro ss bro wsers, but the ren dering behavio r was
different? Then yo u’d have to do ugly bro wser sniffing an d serve
different files to the client con ditionally, like we did back in the
dark ages of IE6.
Once everyone has a co rrect implementation, then the prefixes
can be dropped. Otherwise, the mo st popular b ro wser’s
implementation of the feature becomes the de facto stan dard
even if it’s the mo st b roken (again, IE6)
converted by Web2PDFConvert.com
Reply ↓
Daniel
#A P R I L
1 8 ,
2 0 1 3
Regarding the example with the 6 item s of fixed dimen sion s to be
evenly distrib uted – using the
justify-content: space-aro un d; rule:
I’d really like to use this, ho wever it’s not doing exactly what I want.
Let’s say there’s only room fo r 4 of the item s on the first ro w, the
remaining 2 will be evenly spaced on the secon d ro w. ( ughh)
Is there any way fo r item s on the last ro w to be placed/aligned
un derneath the elements f rom the previo us ro w (left-> right)??
Coolcat 007
#A P R I L
1 8 ,
2 0 1 3
This is something that can be done with the g rid layo ut mo dule,
b ut it is not suppo rted by the b ro wsers yet.
Yo u co uld always use tables an d calc()
Daniel
#A P R I L
1 8 ,
2 0 1 3
@Coolcat007 Yo u mention that this can be done with tables an d
calc() – is this so – even if yo u have a dynamic n umber of
item s?? If it is – any chance of a fiddle / co depen?
Thanks!
Reply ↓
Coolcat 007
#A P R I L
1 8 ,
2 0 1 3
@Daniel
So rry, I misun derstoo d yo ur q uestion. Fo r a dynamic n umber of
item s, this won’t wo rk witho ut JS o r php.
This is in deed a thing that co uld be added.
Something like align-item s:main-axis /c ro ss-axis co uld be a g reat
addition.
Reply ↓
Catalin Ro su
#A P R I L
1 9 ,
2 0 1 3
I think the bro wser suppo rt table is missing a cell, the one with
Opera’s version 12.1+.
The table, as it is no w, sho ws “Any” fo r IE. It’s f unny! :)
Ch ri s Coyie r
#A P R I L
1 9 ,
2 0 1 3
Fixed, thanks!
converted by Web2PDFConvert.com
Reply ↓
Tim McKay
#J U N E
1 4 ,
2 0 1 3
Wo rks beautif ully in Ch rome an d Safari, b ut I’m on FireFox (v21)
an d it’s not wo rking well at all. It doesn’t allo w the parag raph s to
b reak. It’s like it’s treating the display:flex as display:inline-flex. The
only way I’ve been able to get aro un d this is to change the
abo ut:config of Firefox to m ultiline, b ut visito rs won’t have that set
by default.
Has anyone had any luck with this? Currently I’m using flexbox fo r
webkit an d equalize.js fo r other bro wsers.
Coolcat 007
#J U N E
1 4 ,
2 0 1 3
I think that’s because flexbox isn’t f ully suppo rted by firefox until
v22. That’s why I’m running the v22 beta at the moment. Yo u
can always use the display:box untill ff 22 is released.
Reply ↓
Daniel
#J U N E
2 3 ,
2 0 1 3
Am I c razy eno ugh if I use this in pro duction? I have a really awkward
situation an d I can’t use display: table. It messes up with the fluidity
of the images.
Kevin L.
#A P R I L
7 ,
2 0 1 4
Yo u can use flexbox in pro duction pretty well as long as yo u’re
using a so un d way to detect less-than-ideal suppo rt fo r flex-wrap
w/ mo dernizer an d use a ratio-based g rid system like
Sing ularityg s as a fallback.
An example: http:// sassmeister.com/gist/ 9781525 (toggle the
flexbox an d .noflex option.
It’s a so un d strategy to the extent yo u can use flexbox first
to wards planning fo r the layo ut an d q uickly c reate the fallback
with a ratio-based g rid system.
A s long as yo u’re con siderate eno ugh to have a style g uide that
doc uments doc umenting ho w a partic ular component o ught to
look if it in facts differs f rom both, yo u sho uld be fine.
Reply ↓
Wolf
#J U N E
2 7 ,
2 0 1 3
Flexbox is no w unprefixed in Firefox ( 22).
converted by Web2PDFConvert.com
Reply ↓
T ri Noen sie
#J U L Y
9 ,
2 0 1 3
I fo un d a compass compatible mixin s
Reply ↓
tinabean s
#J U L Y
1 0 ,
2 0 1 3
In yo ur secon d Co depen example ( with the blue navigation bar), I
co uldn’t fig ure o ut why the flo w-direction: column doesn’t seem to
kick in at the smallest sc reen width. I played aro un d with a few values
an d fo un d that explicitly adding some height to the ul.navigation
made the li’s stack vertically. Is there a better way aro un d this
witho ut requiring a hard-co ded height?
Jay
#M A Y
2 ,
2 0 1 4
That’s because the co de fo r max 600 width is missing a flex-flo w:
column wrap; if yo u are using firefox. It only contain s one fo r
web-kit. Once I added that in, it does it nicely in my FF.
Reply ↓
skitte rm
#J U L Y
1 2 ,
2 0 1 3
Thanks fo r the po st. I fo un d it highly in sightf ul.
Reply ↓
Ank ur Obe roi
#J U L Y
1 3 ,
2 0 1 3
Something weird is going on in the first example’s pen
(http://co depen.io/ HugoGiraudel/pen/LklCv). I tried rec reating it
on Co dePen an d noticed it wasn’t wo rking, even when I copied an d
pasted! Then I tried rec reating it locally, copied an d pasted, an d
again it didn’t wo rk. So then I took to the Ch rome DevTools to take a
look at what was going on an d it looks like even tho ugh the pen uses
the rule justify-content: space-around; , what is actually ren dered on the
page is -webkit-justify-content: space-around; . T urn s o ut prefix-f ree was
turned on in the Co dePen config fo r the Sc ss panel.
Even if thi s wa s Co dePen’ s p ref ix-f ree do ing the wo rk f o r
m e, m ixing ven do r p ref ixe d rule s an d no n-p ref ixe d rule s
that the p rep ro c e sso r t ran sf o rm s sho ul d be a no -no .
Ion ut
#J U L Y
2 2 ,
2 0 1 3
Reply ↓
Ryan Boog
#J U L Y
2 4 ,
2 0 1 3
Nice po st Ch ris. I like ho w tho ro ugh an d detailed yo u are. Too bad we
don’t use SASS, we rely almo st solely on L ESS. We wo uld love to use
Flexbox fo r clients, b ut it doesn’t seem to play nicely c ro ss b ro wser. I
checked this page in FF 22 an d IE10 an d it was a mess.
converted by Web2PDFConvert.com
Do yo u, o r anyone else, kno w of any goo d JS polyfills o r plugin s o r
solution s to get this to play c ro ss-bro wser nicely? Otherwise, ho w
long (in yo ur opinion) until we can ‘realistically’ use this witho ut a
lot of c ro ss b ro wser headaches?
Reply ↓
Da rio G ra ssi
#A U G U S T
1 3 ,
2 0 1 3
G reat po st Ch ris. I think that flexbox capability to o rder item s will be
usef ull in RWD.
I’ve got only a question. When yo u define main-axis yo u say that its
direction depen ds on the justify-content property, but isn’t the flexdirection property that defines if flex item s are layed o ut as a ro w o r
as a column? Am I misun derstan ding something?
Ch ri s Coyie r
#F E B R U A R Y
1 0 ,
2 0 1 4
When yo u define main-axis yo u say that its direction depen ds
on the justify-content property, b ut isn’t the flex-direction
property that defines if flex item s are layed o ut as a ro w o r as a
column?
Yo u’re co rrect, that was wrong in the article an d is fixed no w.
Reply ↓
ZippZipp
#A U G U S T
1 5 ,
2 0 1 3
Hey, anybo dy kno ws real site that using flexbox?
I kno w that SM try to use it some time ago, but return s to floats.
Jacob D ubail
#A U G U S T
1 5 ,
2 0 1 3
Hey ZippZipp,
I tried to build my personal/po rtfolio site with flexbox a few
month s ago, b ut got super f rustrated with the syntax. I just fo un d
this Sass helper https:// raw.gith ub.com/timhettler/compassflexbox/master/exten sion s/compassflexbox/ stylesheets/_flexbox.sc ss, which is wo rking really well
so far. I’m hoping to launch my new site in the next 2 weeks using
flexbox fo r everything except IE 8/ 9.
Johnny Cal de ron
#F E B R U A R Y
1 8 ,
2 0 1 4
I wo uld like to fin d one too, but older bro wsers just make it a big
pain… I’d rather use floats to keep the headache away an d less
co de.
J ust yesterday I was checking my b ro wsers suppo rt an d I saw that
flex is no w un-prefixed in these version s, b ut unfo rtunately not
everybo dy has updated b ro wser version s.
IE11
converted by Web2PDFConvert.com
Mo zilla Firefox 27.0.1
Ch rome 32.0.1700
Opera 19.0
Safari still uses the rule: “ display: -webkit-box;”
Safari 5.1.7
Eden
#M A Y
1 4 ,
2 0 1 4
I did a school project using flexbox ( with help f rom
A utoprefixer): eden sg.gith ub.io/ASM 2O
Reply ↓
Davi d
#A U G U S T
2 2 ,
2 0 1 3
main axis – The main axis of a flex container is the primary axis
along which flex item s are laid o ut. Beware, it is not necessarily
ho rizontal; it depen ds on the j ustif y-c o ntent property ( see
belo w).
I think yo u mean f lex- di rec tio n .
flex-direction (Applies to: parent flex container element)
flex-direction: ro w | ro w-reverse | column | column-reverse
ro w ( default): left to right in ltr; right to left in rtl
ro w-reverse: right to left in ltr; left to right in rtl
column: same as ro w b ut top to bottom
c o l um n- reve rse : same as ro w-reverse b ut top to bottom
I think in c o l um n- reve rse yo u mean but bottom to up
sam
#A U G U S T
2 2 ,
2 0 1 3
Reply ↓
Selen IT
#S E P T E M B E R
6 ,
2 0 1 3
Firefox 22+ has unprefixed Flexbox, b ut, unfo rtunately, it still
doesn’t suppo rt flex-wrap property (an d hence flex-flo w sho rthan d).
So the won derf ul example with 3-column layo ut reducing to 1
column on narro w sc reen in Firefox looks really messy. But it’s
po ssible to c reate its simplified analog that wo rks in both
Ch romium-based b ro wsers an d Firefox 23+:
http://co depen.io/anon/pen/pEIKu
Reply ↓
Jack Cal de r
#S E P T E M B E R
1 2 ,
2 0 1 3
Wo w, its really the one the best po st i ever read on this topic. The
steps which yo u have mentioned are really perfect.
converted by Web2PDFConvert.com
Reply ↓
A rth ur
#S E P T E M B E R
1 4 ,
2 0 1 3
Hey, Cris! Looks like “flex-wrap” inco rrectly wo rks in Firefox an d
Opera! Both tomato blocks an d very last demoes do not wo rk!
Is there some wo rkaro un d already?
An d thank yo u so m uch fo r yo ur web site! ;)
Selen IT
#S E P T E M B E R
2 0 ,
2 0 1 3
Yes, only latest Ch romium-based b ro wsers like Ch rome, Opera
16+ etc. seem to suppo rt m ulti-line flexboxes c urrently. A s a
wo rkaro un d, yo u can use nested flexboxes in combination with
media q ueries, as in my comment above (it’s not so flexible as
true m ulti-line flexboxes, b ut still better than nothing) o r use
g racef ul deg radation to old techniq ues like inline-blocks.
Reply ↓
pacea ux
#S E P T E M B E R
2 0 ,
2 0 1 3
I’ve fo un d that, in Ch rome 29, an d
Source Exif Data:
File Type : PDF
File Type Extension : pdf
MIME Type : application/pdf
PDF Version : 1.4
Linearized : No
Title : A Complete Guide to Flexbox | CSS-Tricks
Creator : http://www.convertapi.com
Producer : http://www.convertapi.com
Page Count : 82
.