Float vs. Flex Grids
Float-Based Grids
Use it for: Websites. Really Old Browsers.
http://kellishouts.github.io/css-properties/
Old Grid Problems
Inline Block Issues:
- Vertical Alignment
- Spaces between Items
Floating Issues:
- Parents lose their height
Issues with Both Methods:
- Vertical Alignment
- Columns with fixed and variable widths
Flexbox
Use it for: Modern Browsers, Modern Apps.
Beginner Flexbox Properties
Know at least the items highlighted Blue!
Everything else, you can refer to, as needed.
The Parent Box
display:flex;
flex-flow: row wrap;
The first value for flex-flow is either "row" or "column"
The second value for flex-flow is either "wrap" or "nowrap".
nowrap means that all child elements must fit in one line.
wrap means that child elements can flow to subsequent lines if space runs out.
The parent box must have at least 2 properties, display:flex, and flex-flow
The Parent Box
align-items: center;
use this for aligning items on the up/down axis
center, flex-start, stretch, flex-end
Additional property for the parent box:
The Parent Box
justify-content: space-between;
justify-content: center, flex-start, flex-end, space-between, space-around
Additional property for the parent box:
The Children
flex: 1 1 500px;
The first value for flex is a number. It specifies if the child element should "grow" if there is extra space in the row. It is typically either 0 (do not grow) or 1.
The second value for flex is a number. It specifies if the child element should "shrink" if there is extra space in the row. It is typically either 0 (do not shrink) or 1.
The third value for flex is the 'flex-basis' initial size. It specifies the initial width of the element. It is either auto (adjust to the width of its contents), or a px, em, % or other measurement.
The children must have at least 1 property, flex.
(here is an example):
flex: x x x;
If there are multiple flex children, the first "grow" value of all the children is compared. If all grow values are equal, all elements will distribute extra space to each element evenly:
flex: 1 0 80px;
flex: 1 0 160px;
flex: 1 0 70px;
flex: x x x;
If values are not equal, space will be distributed in proportion, distributing the most space to the highest number.
flex: 1 0 80px;
flex: 2 0 160px;
flex: 1 0 70px;
flex: x x x;
If values are equal for the shrink value, space will be subtracted in proportion between elements when the parent box is narrow. If values are not equal, the most space will be subtracted from the element with the highest number.
flex: 1 1 80px;
flex: 2 0 160px;
flex: 1 1 70px;
this box is setting 0 for shrink, meaning "do not shrink"
flex: x x x;
The last value is the initial size of a box.
By default, a box is the size of its contents, or a value of auto.
You can set a px width, % width, or any value you would typically assign to width or max-width.
Tip: Avoid using auto in most cases. Instead, it is usually easier to set a % or px initial size, and a grow value for the element.
Order
You can change the order of child elements by assigning each child element an order. Items will be ordered from lowest to highest.
Additional Property for Child Elements:
order: 1;
Fix the Grids!
https://github.com/devleague/Fun-with-FlexBox
Install node, import the reset, clearfix,
Import the reset, clearfix, and general styles partials (in this order) into the primary styles.scss file.
EXERCISE SET UP
Small Grid with Flexbox
You will need to inspect the elements in a browser and study the general styles.
You will need to @include an inline media queries
EXERCISE 1
Two-Column Grid
Style this area so that the result is visually similar to the
Float-Based grid, except uses flexbox properties.
(The flexbox grid has the added benefit that it will fill the full height from the top to bottom of each column.)
EXERCISE 2
Centering
Centering Formula
Parent Element:
display:flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
Child Elements:
flex: x x x;
Centering Formula 2
Parent Element:
display:flex;
flex-flow: row nowrap;
Child Elements:
flex: x x x;
margin: auto;
Vertical Centering
Use the first formula to vertically center the green div.
EXERCISE 3A
Vertical Centering
Use the second formula to vertically center the green div.
EXERCISE 3B
Order
There are instructions to style the A, B, C, and D divs in a different order and either on several rows, or a single row at each size (small, medium, and large).
EXERCISE 4
Fixed + Variable Width
Make some columns fixed-width and some variable width at different media queries.
EXERCISE 5
Flexbox
By Ray Farias
Flexbox
Flexbox
- 2,305
