Day 1
Day 1
Day 1: Flexbox
Jen Kramer @jen4web
• Wifi: Connect to MJGWorkshop
Password: PlayTeachDeliver
• Download workshop files:
https://github.com/jen4web/fem-
layout-2
• Have a way to edit HTML and CSS files
available.
Make sure you have Firefox and/or
Chrome installed.
• Hipster donuts up front, coffee on the
way, help yourself to the fridge!
• Restrooms around corner to left
Responsive Design
• Defined by three characteristics
• Flexible grid-based layout
• Media queries (CSS3)
• Images that resize
www.alistapart.com/articles/responsive-web-design/
https://ethanmarcotte.com/wrote/responsive-design-
at-11-container-queries/
Grid-based
layout
Images that resize
• PS – media queries go
beyond screen size!
• Aspect-ratio
• orientation
Disadvantage:
Wasn’t designed to be locked down for layouts!
Works in 1 dimension only.
http://www.lynda.com/CSS-tutorials/CSS-Flexbox-First-Look/116352-2.html
http://www.lynda.com/CSS-tutorials/CSS-Flexbox-First-Look/116352-2.html
Three
versions of
Flexbox
• Flexbox Froggy:
http://flexboxfroggy.com/
• Flexbox Defense:
http://www.flexboxdefense.com/
Flexbox properties
Parent (Flex Container) Children (Flex Items)
display: flex | inline-flex; order: <integer>;
flex-direction: row | row-reverse | column | flex-grow: <number>;
column-reverse;
flex-shrink: <number>;
flex-wrap: wrap | nowrap | wrap-reverse;
flex-basis: <length> | auto;
flex-flow (shorthand for flex-direction and flex-
wrap) flex: shorthand for grow, shrink, and
basis (default: 0 1 auto)
justify-content: flex-start | flex-end | center |
space-between | space-around | space-evenly; align-self: overrides alignment set on
parent
align-items: flex-start | flex-end | center |
baseline | stretch;
align-content (cross axis - adjust to largest
item): flex-start | flex-end | center | stretch |
space-between | space-around;
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox grid
. R O W / C O N TA I N E R
ITEM/ ITEM/ ITEM/ ITEM/
.COL-1 .COL-1 .COL-1 .COL-1
<div class=“row”>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
</div>
.row { .col-1 {
display: flex;
flex-flow: row wrap; flex-basis: 24%;
justify-content: center; /* desktop */
gap: 1%;
} flex-basis: 48%;
/* tablet */
flex-basis: 98%;
/* phone */
}
/* rearranging the columns */
.col-push-1 {
order: 2;
}
.col-pull-3 {
order: 1;
}