Why flex property doesn't work on flex-items when setting it on the container?
![Creative The name of the picture](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPz5qhCkKGdpPJ0wkSm5JqlliSJoZg92-H4DuCruovhkVFuXerCphZt9wys_Gr3uwQyXObMHDwattjG5BSeCEl_LdDq1GPLct8qYyRyX4fZ9C93oW-TX7IGZLYDwqRgfFCXA4aUxkBAcS/s1600/1.jpg)
![Creative The name of the picture](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6VebLk98DYwS3K2nWZSCatab-q4HrSuRk91M4fQA8SHrKU_-x-lq1n780pSU_bIVLqMRv6pc3dhhh-Y2PUwBS9mM0BxvY1eM6XsM-e7Diu4z-wAoeDG0vB3-2_1U9RE8sO0lg4PHiIXbI/s400/Clash+Royale+CLAN+TAG%2523URR8PPP.png)
Why flex property doesn't work on flex-items when setting it on the container?
The problem is that when I set flex on the container which is section, nothing happens but when I set it individually on flex-items, it works properly. Doesn't flex property get inherited by the items or I'm missing something?
Also, another problem is that when I set flex-shrink on main and aside with different values(like 3 for main and 2 for aside) it doesn't seem to work.
*
box-sizing: border-box;
text-align: center;
margin: 5px;
header
display: block;
background-color: red;
aside
background-color: green;
main
background: purple;
footer
background-color: black;
display: block;
/* main, aside
flex-grow: inherit;
*/
section
display: flex;
height: 50em;
flex: 1 1;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Header</h1>
</header>
<section>
<aside>aside</aside>
<main>main</main>
</section>
<footer>
footer
</footer>
</body>
</html>
1 Answer
1
Flex is a shorthand for flex-grow, flex-shrink and flex-basis. It applies to flex children and has nothing to do with container.
As for a second question, flex-shrink defines a rate at which different flex children shrink if you reduce the screen size, not sure what is not working there, should work normally.
@Boypro if one of children has flex-shrink of 1 and another of 2 the one with 2 will shrink twice as fast. If you have more questions iam here to help)
– Никита Гулис
1 hour ago
@Boypro Please show me the problematic behavior of header with image so i can help you with that
– Никита Гулис
48 mins ago
@Boypro In your example it has no width at all, which means that by default it would take up only the space needed for its content. Also all plain html tags are responsive by default and would shrink.
– Никита Гулис
36 mins ago
@Boypro For many reasons such as changing the way things are positioned on different devices, hiding or showing smth on different screen sizes, changing font sizes, margins, paddings. In short, to make your website look good on availible devices and in all browsers that you want to support. Some things just scale well by themselves, some dont, and thats why we need mediaqueries.
– Никита Гулис
30 mins ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
@Boypro added it to the answer
– Никита Гулис
1 hour ago