Date post: | 15-Aug-2015 |
Category: |
Technology |
Upload: | visual28 |
View: | 36 times |
Download: | 0 times |
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
1
UnderstandingFlexbox
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
2
Mark Aplet
@visual28 [email protected]
Front-End Web Developer at SymSoft Solution
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
3
Flexbox Layout
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
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
4
Flexbox Module
Main Size
Cro
ss S
ize
Cro
ss A
xis
Main Axis
Cross Start
Cross End
Main Start Main End
1 2Flex Item
Flex Container
Flex Item
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
5
Flex Container
display: block display: inline display: inline-block
.container { display: flex; /* inline-flex */}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
6
Flex Direction
Determines the axis orientation Defaults to row row, row-reverse, column,
column-reverse
.container { flex-direction: row;}
1 2 3
1
2
3
3
2
1
3 2 1
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
7
Flex Wrap
Tries to fit on one line by default Defaults to nowrap nowrap | wrap | wrap-reverse
.container { flex-wrap: wrap;}
1
3
2
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
8
Flex Flow
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;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
9
Justify Content
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;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
10
Justify Content
1 32flex-start
1 32flex-end
1 32center
1 32space-between
1 32space-around
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
11
Justify Content
1 32space-around
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
12
Align Items
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;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
13
Align Items
1 2 3 4flex-start1
2 3 4
flex-end
1 2 3 4center 1 2 3 4stretch
baselinetext text text text
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
14
Align Content
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;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
15
Flex Items
Children elements of flex-container
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
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
17
Flex Grow
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;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
18
Flex Grow
.item:nth-child(2) { flex-grow: 2;}
1 1 1
1 2 1
.item { flex-grow: 1;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
19
Flex Shrink
Defines the ability for a flex item to shrink if necessary
Unitless value that represents a proportion Defaults to 0
.item { flex-shrink: 1;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
20
Flex Basis
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;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
21
Flex Basis
short much longer shortAll Space Distributed(flex-basis:0)
1 1
short much longer shortExtra Space Distributed(flex-basis:auto)
1 1 1 1 2 2
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;}
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
23
Flex/* 0 0 auto */flex: none;
/* One value, unitless number: flex-grow */flex: 2;
/* Two values: flex-grow | flex-basis */flex: 1 30px;
/* Two values: flex-grow | flex-shrink */flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%;
4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
24
Align Self
Allows for individual items to be overridden
.item { flex-align: flex-start;}
1 2
3
4
flex-start
flex-end
.item:nth-child(3) { align-self: flex-end;}