Use it for: Websites. Really Old Browsers.
http://kellishouts.github.io/css-properties/
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
Use it for: Modern Browsers, Modern Apps.
Know at least the items highlighted Blue!
Everything else, you can refer to, as needed.
The first value for flex-flow is either "row" or "column"
(You will hardly ever use "column").
The second value for flex-flow is either "wrap" or "nowrap".
Wrap means that all child elements must fit in one line.
Nowrap 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
center, flex-start, stretch, flex-end
(if you are in the common "row" orientation, this sets whether items stretch vertically to fill a row, sit in the center, sit at the top, or sit at the bottom.)
Additional property for the parent box:
justify-content: center, flex-start, flex-end, space-between (...and there are more)
(if you are in the common "row" orientation, this sets whether items stretch horizontally to fill a row, hug the sides and split remaining space evenly, sit in the center, sit at the right, or sit at the left.)
justify-content will only do something if none of your child items "grow" to fill space.
Additional property for the parent box:
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):
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;
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;
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"
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.
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:
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.
Style this area so that the result is visually the same as the Inline Block Hack, except uses flexbox properties.
You will need to inspect the elements in a browser and study the general styles.
You will need to @include an inline media queries
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.)
Parent Element:
Child Elements:
Parent Element:
Child Elements:
Use the first formula to vertically center the green div.
Use the second formula to vertically center the green div.
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).
Make some columns fixed-width and some variable width at different media queries.