aboutsummaryrefslogtreecommitdiff
path: root/posts/width-vs-flex-basis.md
blob: 534a42fda5ad33e9a820cd28cd25283be4cfee77 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# Width or Flex-Basis?

2018-11-28

Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let's breakdown how to solve this issue using both `inline-block` paired with `width` and `flex-basis`.

## Width

Setting the width of the inner children to a divisible value and setting their display to `inline-block`, we are able to create self-wrapping elements:


    .width-container {
        display: block;
    }
    .width-container__item {
        display: inline-block;
        width: calc(33% - 3px); /* Fix for wonky inline-block margins */
    }


### Pros

- <a href="https://caniuse.com/#search=inline-block">Full browser support</a> (as far back as IE6)
- No floats needed

### Cons

- Buggy `margin` workaround needed
- Wrapped elements cannot dynamically fill remaining empty parent space

## Flex-basis

This is my personal preference for dynamically wrapping inner children elements. Simply set the parent as `display: flex`, allow flex-wrapping and then set the `flex-basis` of the children to any percentage value.


    .flex-container {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-container__item {
        flex: 1 1 auto;
        flex-basis: 33%;
    }


You will also notice the `flex` property set to `1 1 auto`. This is important if you require your wrapped elements to fill the remaining space of the parent container.

### Pros

- No buggy margins to play with
- Dynamically renders children to fill parent container if `flex` is set
- Scales well across screen / device sizes

### Cons

- Some versions of IE struggle with <a href="https://caniuse.com/#search=flex-basis">browser support</a>

## CodePen Demo

Feel free to play around with a slightly more stylized version of both options below:

<a href="https://codepen.io/bradleytaunt/pen/JevaYQ">CodePen Demo: Width or flex-basis</a>