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>
|
