We help IT Professionals succeed at work.

CSS3 Flex

AXISHK asked
Last Modified: 2017-06-01
What does the following CSS Flex mean ? Some example to illustrate will be great.

.aside {flex: 1 auto;}
.main  {flex: 3 0px;}

Watch Question

Allan NisbetOwner at Storm IT Solutions LTD


In this case

' Used to tell the side bars to share a row
.aside {flex: 1 auto;}

Open in new window

'used to tell the main element to be 3 times as wide as the sidebars
.main  {flex: 3 0px;}

Open in new window

.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; }

Open in new window

Hope this Helps

SOurce: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I used this site to understad flexbox helped me visualise it alot better
Brandon LyonWeb Developer/Designer

There are three values in each flex shorthand declaration.

The first value is Flex-Grow. Usual values are one or zero, where zero is don't grow this column beyond it's default value.
The second value is Flex-Shrink. Usual values are one or zero, where zero is don't shrink this column beyond it's default value.
The third value is the default width. This can be auto, 70%, 330px, 25vw... whatever.

As Allan described, sometimes the values for grow or shrink aren't a simple 1 or 0. In that case the behavior is as described. A 3 would mean something like "grow this up to 3 times the size of the other item(s) (if they are 1)".



So "auto" and "0px" is the default width, correct ?
.aside {flex: 1 auto;}
.main  {flex: 3 0px;}
Owner at Storm IT Solutions LTD
Unlock this solution and get a sample of our free trial.
(No credit card required)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.