View Code? Open in Web Editor
NEW
Responsive web design sample and guide.
Home Page: https://juejin.im/post/5a22d0086fb9a0451a7631ee
License: MIT License
responsive-web-design-tricks's Introduction
responsive-web-design-tricks
1. float, float: left|right
try it yourself
2. inline block, display: inline-block
try it yourself
- Float need to clear, no vertical centering
- Inline-block white space collapse issue
- Float or inline-block. it depends on your preference
3. flexible box, display:flex
try it yourself
Flex vs float / inline-block
- Flex could be a replacement for float and inline-block
- Flex has vertical centering and equal heights
- Horizontal only vs Both Horizontal and Vertical
- There are multiple ways to do the same thing with flexbox
- Complex syntax and not supported by older browsers with flexbox
Can I use flex ?
try it yourself 1
try it yourself 2
- One dimensional vs Two dimensional
- Major layouts(Grid) vs UI elements(Flex)
- Grid is easier to learn and to use
- Grid has a bit less browser support.
Can I use grid ?
responsive-web-design-tricks's People
Contributors
Watchers