How can I give items in a flex column the same width?
I've got this code:
<body>
<Header />
<main><slot /></main>
<Footer />
</body>
</html>
<style is:global>
body {
display: flex;
flex-direction: column;
align-items: center;
}
main {
max-width: 60%;
}
@media (max-width: 640px) {
main {
max-width: 95%;
}
}
</style>
I want the header and footer to have the same width as main. I've got different pages that have different widths of the main, so I couldn't set a static width of the header and footer. How would I do this?5 Replies
Can you not apply the width to the parent wrapper?
In your case this would be the body (though I would consider adding a separate wrapper element to apply the styles rather than messing too much with the body tag itself).
No, because this code is in the layout, I'd like it to automatically adjust to the width of main. Sorry, for not specifying this :)
applying the width to the parent wrapper as chris said is the way you'd do it. If you want an element to know how wide another is and adjust, you'd need js for that i believe.
Or use grid 😅
By default grid children will fill, you can also control the size from same parent grid.
Thanks, I apparently set a static width on the header and footer, so when I removed it they automatically adjusted, because of the flex box. Sorry :)