flexbox problem
I am try to make this using flex , but soon I try this for small screen, It produce bad result
<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.main {
max-width: max-content;
margin: auto;
}
span {
display: inline-block;
background-color: pink;
border-radius: 5px;
margin: 3px; padding: 10px 20px;
text-align: center;
}
.flex1, .flex2, .flex3, .flex4, .flex5 {
display: flex;
}
.flex1 > span {
flex: 8.8%;
}
.flex2 > span {
flex: 33.33%;
}
</style>
</head>
<body>
<div class="main">
<div class="flex1">
<span>span 1</span>
<span>span 1</span>
<span>span 1</span>
<span>span 1</span>
<span>span 1</span>
<span>span 1</span>
<span>span 1</span>
<span>span 1</span>
<span>span 1</span>
<span>span 1</span>
</div>
<div class="flex2">
<span>span 4</span>
<span>span 4</span>
<span>span 4</span>
</div>
<div class="flex3">
<span style="flex: 33.33%;">span 4</span>
<span style="flex: calc(100% - 33.33%);">span 8</span>
</div>
<div class="flex5">
<span style="flex: 100%;">span 12</span>
</div>
</div>
</body>
</html>
4 Replies
output
as long as the total number spans per row count up to 12, you'd want to set the value of bit lot more sense for these kinds of layouts)
https://css-tricks.com/snippets/css/complete-guide-grid/
flex to the same number as that span
so
row 1: 12 items flex: 1
row 2: 3 items flex: 4
row 3: 1 item flex: 4, 1 item flex: 8
row 4: 1 item flex 12
you could simplify it to
row 1: 12 items flex: 1
row 2: 3 items flex: 1
row 3: 1 item flex 1, 1 item flex: 2
row 4: 1 item flex: 1
your percentages wont work because you don't take the margins into account.
(In flex you can also use 'gap' to create spacing between items, but will still have same issue in combination with percentages)
if you want to learn more about Flex, i think this is a good resource https://css-tricks.com/snippets/css/a-guide-to-flexbox/
for this scenario you could also take a look at css grid (it makes a well I set the max-width: max-content does this make a problem ?
Copying your code, everything looks fine for me 🤔
https://codepen.io/kevinpowell/pen/eYrMxdM?editors=1000
Oh, wait, I see you're in responsive mode. To me, there's an overflow happening on the top row.
Flexbox won't wrap content. Those items in the top row are as small as they can get, so they won't shrink anymore, and they are overflowing out the side.
Add
.flex-1 { outline: 3px solid black } and you should see how it's overflowing
the main { max-width: max-content } probably has no effect at all. It would only do anything if the content inside was pretty small. Because it's a max-width, it will shrink with the viewport, it just will never have a width larger than the content inside it, if that makes sense.