Kim Grinfeder http://www.servergrove.com http://interactive.miami.edu @kimgrinfeder Flex Layouts Tuesday, April 22, 14
Flexbox presentation front end developers meetup miami
Jan 27, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Kim Grinfeder
http://www.servergrove.com http://interactive.miami.edu
@kimgrinfeder
Flex Layouts
Tuesday, April 22, 14
CSSISAWESOME
Tuesday, April 22, 14
FlexboxA CSS box model optimized for user interface
design
Tuesday, April 22, 14
WARNING: This specification has gone through multiple revisions. Check the expiration date on tutorials.
Tuesday, April 22, 14
Can I use it?
Tuesday, April 22, 14
display: block;
Layout options
Tuesday, April 22, 14
display: inline;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit erat sodales venenatis consequat. Nunc vel eleifend ipsum, in tempor metus. Suspendisse quis mi sed lacus dictum dignissim a eget mi. Vestibulum quis quam placerat, lobortis risus laoreet, fringilla erat. Sed volutpat tristique cursus. Integer dapibus felis augue, ut rutrum lectus iaculis sed. Mauris lobortis egestas ipsum, at sodales nibh. Nunc mi felis, blandit at tempus quis, commodo a purus. Duis dictum, tortor vitae commodo posuere, sapien dui scelerisque nunc, nec accumsan lorem elit eu magna. Nullam in condimentum nunc.
Layout options
Tuesday, April 22, 14
Layout optionsdisplay: inline-block;
Tuesday, April 22, 14
floatsclearsclearfixbox-sizing...
Tuesday, April 22, 14
Layout optionsdisplay: flex;
Tuesday, April 22, 14
Flex Container
flex item
flex container
flex item
flex item
display: flex;
Tuesday, April 22, 14
<div class=”flex”>...
</div>
<style>display: flex;
</style>
Tuesday, April 22, 14
Flex Container
flex item
flex container
flex item
flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex container cross axis
main axis
display: flex;
Tuesday, April 22, 14
Children of a flex container can be laid out in any direction
Tuesday, April 22, 14
Flex Container
flex item
flex item
flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex item
flex item
flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14
Main Axisjustify-content: flex-start
Tuesday, April 22, 14
Main Axisjustify-content: flex-end
Tuesday, April 22, 14
Main Axisjustify-content: center
Tuesday, April 22, 14
Main Axisjustify-content: space-between
Tuesday, April 22, 14
Main Axisjustify-content: space-around
Tuesday, April 22, 14
Cross Axisalign-items: flex-start
Tuesday, April 22, 14
Cross Axisalign-items: flex-end
Tuesday, April 22, 14
Cross Axisalign-items: center
Tuesday, April 22, 14
Cross Axisalign-items: stretch
Tuesday, April 22, 14
Cross Axisalign-items: baseline
I Love Miami
Tuesday, April 22, 14
flex-direction: row;
1 2 3
Tuesday, April 22, 14
flex-direction: row-reverse;
3 2 1
Tuesday, April 22, 14
flex-direction: row;
cross-axis
main-axis
Tuesday, April 22, 14
flex-direction: column;
Tuesday, April 22, 14
flex-direction: column;
Tuesday, April 22, 14
cross-axis
flex-direction: column;
main-axis
Tuesday, April 22, 14
cross-axis
main-axis
flex-direction: column;
1
2
3
Tuesday, April 22, 14
cross-axis
main-axis
flex-direction: column-reverse;
1
2
3
Tuesday, April 22, 14
Flex Containerdisplay: flex;flex-direction: row;justify-content: flex-start;align-items: center;
Tuesday, April 22, 14
flex-wrapflex-wrap: nowrap
Tuesday, April 22, 14
flex-wrapflex-wrap: wrap
1 2 3 4 5 6 7
8 9 10 11 12 13 14
Tuesday, April 22, 14
flex-wrapflex-wrap: wrap-reverse
8 9 10 11 12 13 17
1 2 3 4 5 6 7
Tuesday, April 22, 14
flex-wrapflex-wrap: nowrap
Tuesday, April 22, 14
flex-flowflex-wrap + flex-direction
flex-flow: row wrap;
Tuesday, April 22, 14
Flex-items
Tuesday, April 22, 14
flex-grow
Determines how much the flex item will grow relative to the rest of the flex items in the flex container when
positive free space is distributed
Tuesday, April 22, 14
flex-shrink
Determines how much the flex item will shrink relative to the rest of the flex items in the flex container when
negative free space is distributed
Tuesday, April 22, 14
flex-basisThe initial main size of a flex item,
before free space is distributed according to the flex factors
The default value is auto,also accepts % or absolute length
Tuesday, April 22, 14
flex-basis
Tuesday, April 22, 14
flex
flex: 1 1 200px;=
flex-grow: 1;flex-shrink: 1;flex-basis: 200px;
Tuesday, April 22, 14
order
Controls the order in which flex items appear within their flex container
Tuesday, April 22, 14
align-self
Overrides the default alignment (align-items)for individual flex-items.
Tuesday, April 22, 14
Responsive?
Tuesday, April 22, 14
Thank you
@kimgrinfeder
Tuesday, April 22, 14
Related Documents
![[Heroku meetup LT] Salesforce1 Developers Community MAXの紹介](https://static.cupdf.com/doc/110x72/546d6ecfaf79596c298b534e/heroku-meetup-lt-salesforce1-developers-community-max.jpg)
