Why flex property doesn't work on flex-items when setting it on the container?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP

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 added it to the answer
– Никита Гулис
1 hour ago





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

Comments

Post a Comment

Popular posts from this blog

Executable numpy error

Image
Clash Royale CLAN TAG #URR8PPP Executable numpy error I'm trying to create an executable file for my code. I've already tried with cx_Freeze and with pyinstaller. Both gives me the same error, which is: "Missing required dependencies 0.format(missing_dependencies))" PS C:UsersGustavoDesktopbuildexe.win32-3.6> python AgendaOficial.py C:UsersGustavoAppDataLocalProgramsPythonPython36-32python.exe: can't open file 'AgendaOficial.py': [Errno 2] No such file or directory PS C:UsersGustavoDesktopbuildexe.win32-3.6> .AgendaOficial.exe Traceback (most recent call last): File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_Freezeinitscripts__startup__.py", line 14, in run module.run() File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_FreezeinitscriptsConsole.py", line 26, in run exec(code, m. dict ) File "AgendaOficial.py", line 8, in File "C:UsersGustavoAppDataLocal...
Read more

PySpark count values by condition

Image
Clash Royale CLAN TAG #URR8PPP PySpark count values by condition I have a DataFrame, a snippet here: [['u1', 1], ['u2', 0]] basically one string ('f') and either a 1 or a 0 for second element ('is_fav'). What I need to do is grouping on the first field and counting the occurrences of 1s and 0s. I was hoping to do something like num_fav = count((col("is_fav") == 1)).alias("num_fav") num_nonfav = count((col("is_fav") == 0)).alias("num_nonfav") df.groupBy("f").agg(num_fav, num_nonfav) It does not work properly, I get in both cases the same result which amounts to the count for the items in the group, so the filter (whether it is a 1 or a 0) seems to be ignored. Does this depend on how count works? count 1 Answer 1 There is no filter here. Both col("is_fav") == 1 and col("is_fav") == 0) are just boolean expressions and count doesn't really care about their value as long a...
Read more

Mass disable jenkins jobs

Image
Clash Royale CLAN TAG #URR8PPP Mass disable jenkins jobs Is it possible to disable a large number of Jenkins jobs in one go? I have a large number of jenkins job I need to disable. Visiting each job in turn and disbling is tedious. 2 Answers 2 https://wiki.jenkins-ci.org/display/JENKINS/Configuration+Slicing+Plugin That works beautifully install it go to http://your_jenkins.com:8080/slicing/jobdisabledbool/? By using configuration slicing plugin: By using this plugin easy to find out anything has enabled or disable jobs and timer separated jobs Manage Jenkins >Config slicing > select options 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.
Read more