Meetup: CSS Flex

Organizer: Developer Community Johor
Co-organizer: Student Society of Department of Computer Science & Johore E-commerce Association Youth Group SUC

Date: 26 Oct 2018 (Friday)
Time: 8PM - 10PM (GMT+8)
Venue: 8D Hub (Setia Tropika)

Transcript

1. Meetup: CSS Flexbox A.M.A 8-10P , 26 Oc ’ 18 @8d u (se ro ) Pre d Jac
2. Who am I ? - Graduate Diploma in Computer Science (2013 - 2016) - Application Consultant in GNey Software (2016-2018) - 2 Years Experience in HTML, CSS, JavaScript, AngularJs, .Net Framework
3. Developer Community Johor
4. Developer Community Johor Networking Learning
5. Flexible Box The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox Source: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
6. Layout Modes Block Layout Table Layout Float Layout Positioned Layout Flex Layout Grid Layout
7. Why Flexbox ?
8. How to start ? Source: https://codepen.io/jacob94/pen/jeePzV
9. CSS Properties Container Properties: - flex-direction: row | column | row-reverse | column-reverse - justify-content: flex-start | center | flex-end | space-between | space-around - align-items: flex-start | flex-end | center | baseline | stretch - align-content: flex-start | flex-end | center | baseline | stretch - flex-wrap: no-wrap | wrap Flex Item Properties: - flex-grow: <number> (default: 0) - flex-shrink: <number> (default: 1) - flex-basis: <width> (default: auto) - flex: none | <flex-grow> <flex-shrink> <flex-basis> (default: 0 1 auto) - align-self: flex-start | center | flex-end - order: <number> (default: 0)
10. Main axis & Cross axis Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
11. flex-direction main-axis main start main end row Left Right row-rev erse Right Left column Top Bottom column- reverse Bottom Top row row-reverse column column- reverse Source: https://www.jianshu.com/p/ee3b2b45d85d default: row
12. Main Axis Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
13. justify-content Source: https://envato.com/blog/css3-flexbox/ flex-start flex-start | center | flex-end | stretch | space-between | space-around default: options:
14. align-items Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ stretch flex-start | center | flex-end | stretch | space-between | space-around default: options:
15. Cross Axis Source: https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis
16. align-content Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ stretch flex-start | center | flex-end | stretch | space-between | space-around default: options:
17. flex-wrap Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ no-wrap no-wrap | wrap | wrap-reverse default: options:
18. flex-grow 增长比 Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 0 <number> default: options:
19. flex-shrink 收缩比 1 <number> default: options:
20. flex-basis Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ auto <width> | auto default: options: This defines the default size of an element before the remaining space is distributed. source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-12 Flex 的长度 div 的长度
21. flex auto none | [ <’flex-grow’> <’flex-shrink’> <’flex-basis’> ] default: options: This is the shorthand for flex-grow, flex-shrink and flex-basis combined. source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-13
22. align-self Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex-start flex-start | center | flex-end | stretch | space-between | space-around default: options:
23. DEMO CodePen Demo
24. Browser Support Source: https://caniuse.com/#search=flex • Chrome any • Firefox any • Safari any • Opera 12.1+ • IE 10+ • iOS any • Android any
25. Known Issues Source: https://caniuse.com/#search=flex
26. Limitation And More: Flexbox is awesome but don’t use it here source: https://medium.com/@ohansemmanuel/flexbox-is-awesome-but-its-not-welcome-here-a90601c292b6 Don't use flexbox for overall page layout source: https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ CSS Flex is not everything. Don’t use CSS Flex in Grid System Back to Basics
27. More Resources
29. Thanks our Venue Sponsorship: Co-Organization:
30. Advertising
31. NOV Meetup Looking for Guest Speakers
32. Thanks! Contact me: zhangen69@gmail.com FB: 陈章恩 (Jacob Tan) Whatsapp: 019-776 5290