responsive-web-design-tricks

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

responsive-web-design-tricks

★ 13 Open GitHub ↗

Responsive web design sample and guide.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# responsive-web-design-tricks
<img src="https://raw.githubusercontent.com/wiki/TommyFu/responsive-web-design-tricks/images/sample.jpg" width = "300px" />

### 1. float, `float: left|right`
[try it yourself](https://codepen.io/TommyFu/pen/ZawxMa)

### 2. inline block, `display: inline-block`
[try it yourself](https://codepen.io/TommyFu/pen/oomqPm)

### float vs inline-block

* 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](https://codepen.io/TommyFu/pen/QOYmZd)

### 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 ?](https://caniuse.com/#search=flex)

### 4. grid,  `display:grid`

[try it yourself 1](https://codepen.io/TommyFu/pen/eexMPy)

[try it yourself 2](https://codepen.io/TommyFu/pen/KyJxvo)

### Grid vs Flex

* 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 ?](https://caniuse.com/#search=grid)

responsive-web-design-tricks

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README