Styling with Style
Flexbox and CSS-Grid
Josh Holladay & Brian Barrow
Layout History
Tables
Floats
Let's Talk About Flex... maybe
Flex Container
.flex-container {
display: flex
}
OR
.flex-container {
display: inline-flex
}Main Axis vs Cross Axis
.flex-container {
flex-direction: row || column;
}Flex Direction
Flex Container Properties
.flex-container {
flex-wrap: nowrap || wrap || wrap-reverse;
}Flex Wrap
Flex Container Properties
.flex-container {
flex-flow: row wrap; /* direction row, wrap items */
}Flex Flow
Flex Container Properties
.flex-container {
justify-content: flex-start || flex-end || center ||
space-between || space-around;
}Justify Content
Flex Container Properties
.flex-container {
align-items: flex-start || flex-end || center ||
stretch || baseline;
}Align Items
Flex Container Properties
.flex-container {
align-content: flex-start || flex-end || center ||
stretch;
}Align Content
Flex Container Properties
.flex-container {
order: 1;
}Order
Flex Item Properties
.flex-container {
flex-grow: 0; /* default is 0 */
flex-shrink: 1; /* default is 1 */
}Grow and Shrink
Flex Item Properties
.flex-container {
flex-basis: 150px; /* Can use any size suffix,
note that %'s don't work in iOS */
}Flex Basis
Flex Item Properties
Flex Shorthand
.flex-container {
flex: 0 1 auto; /* shortand: flex-grow flex-shrink
flex-basis */
}Flex Item Properties
.flex-item {
align-self: auto || flex-start || flex-end
|| center || baseline || stretch;
}
Component Layout
When To Use Flexbox?
Entering the Grid
Mind Opening Concept
Use Case
Styling & Terminology
Container
display: grid
grid-template-columns
grid-temaplate-rows
grid-template-areas
grid-column-gap
grid-row-gap
grid-template-gap
grid-gap
fr
repeat
minmax()
Items
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-row
span
lines
tracks
auto placement
Mozilla's Grid Waffle
Let's Build
.grid-container {
display: grid
.grid-container {
display: grid
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
}
.item {
grid-column-start: 2;
grid-column-end: 4;
grid-row: 2 / 3;
}Grid Area
Gaps
fr unit
More Examples
Can I Use...
Can I Use...
Fallback
feature queries
Resources
CSS Grid Garden
Responsive Design
Flexbox
Grid
Styling with Style - Grid Finish Up
By Josh Holladay
