2. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
2
Mark Aplet
@visual28
markaplet@symsoftsolutions.com
Front-End Web Developer at SymSoft Solution
3. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
3
FlexboxLayout
Main Idea: allow the container to alter it’s items height
width and order of appearance for better responsive
layouts
Direction Agnostic
Spotty support since 2009
Candidate Recommendation since 2012
Requires vendor prefix even in modern browsers
Polyfill support not so great
4. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
4
FlexboxModule
Main Size
CrossSize
CrossAxis
Main Axis
Cross Start
Cross End
Main Start Main End
1 2
Flex Item
Flex Container
Flex Item
7. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
7
FlexWrap
Tries to fit on one line by default
Defaults to nowrap
nowrap | wrap | wrap-reverse
.container {
flex-wrap: wrap;
}
1
3
2
8. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
8
FlexFlow
This is a shorthand flex-direction and flex-wrap properties,
which together define the flex container's main axis and
cross axes. Default is row nowrap
.container {
flex-flow: row-reverse wrap;
}
9. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
9
JustifyContent
Defines the alignment along the main axis
Helps distribute remaining free space around items
Defaults to flex-start
flex-start, flex-end, center,
space-between, space-around
.container {
Justify-content: flex-start;
}
12. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
12
AlignItems
Defines the alignment along the cross axis
• Vertical alignment
Think of it as justify-content for the cross axis
Defaults to flex-start
flex-start, flex-end, center, baseline, stretch
.container {
align-items: flex-start;
}
13. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
13
AlignItems
1 2 3 4
flex-start
1
2 3 4
flex-end
1 2 3 4center 1 2 3 4stretch
baseline
text text text text
14. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
14
AlignContent
Defines the distribution of space along the cross axis
Similar to justify-content for the cross axis
Defaults to flex-start
flex-start, flex-end, center, baseline, stretch
.container {
align-content: flex-start;
}
15. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
15
FlexItems
Children elements of flex-container
16. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
16
Order
Controls the order items appear in the flex-container
Use source order by default
Default value is 0
Can use negative values e.g. -1
.item {
order: 1;
}
2 1 34
17. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
17
FlexGrow
Defines the ability for a flex item to grow if necessary
Unitless value that represents a proportion
Dictates amount of space it should take up
Defaults to 0
.item {
flex-grow: 1;
}
19. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
19
FlexShrink
Defines the ability for a flex item to shrink
if necessary
Unitless value that represents a proportion
Defaults to 0
.item {
flex-shrink: 1;
}
20. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
20
FlexBasis
This defines the default size of an element before the
remaining space is distributed
If set to 0, the extra space around content isn't factored in
If set to auto, the extra space is distributed based on it's
flex-grow value
.item {
flex-basis: auto;
}
21. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
21
FlexBasis
short much longer short
All Space Distributed
(flex-basis:0)
1 1
short much longer short
Extra Space Distributed
(flex-basis:auto)
1 1 1 1 2 2
22. 4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
22
Flex
Shorthand for flex-grow, flex-shrink and flex-basis
combined
Recommended over setting individual properties
Uses typical shorthand notaion
.item {
flex: 1 1 auto;
}