kokopelli
-
Posts
2 -
Joined
-
Last visited
kokopelli's Achievements
Newbie (1/7)
0
Reputation
-
Thanks, that clears it up for me.
-
In the simple example below, I had to repeat the background-color in the .second object, otherwise the section takes on the value of a child for the entire object. Noticed that this occurs of several of the attributes but not all. Example: font-family. Is there a way to better isolate the child items to only affect them? I am new to flexbox usage. <!DOCTYPE html> <html> <head> <title>Flexbox Test</title> <style> .container { max-width:900px; margin: 0 auto; display:flex; flex-wrap:nowrap; } .first { background-color:lightblue; max-width:60px; height:100vh; padding:20px; flex:1; } .second { background-color:yellow; //NEGATED BY .second, .d max-width:750px; height:100vh; padding:20px; flex:14; } .second, .a { background-color:tan; } .second, .b { background-color:lightgreen; } .second, .c { background-color:orange; font-family:Verdana, Arial, Helvetica, sans-serif; } .second, .d { background-color:pink; font-family:"Times New Roman", serif; } .third { background-color:fuchsia; max-width:60px; height:100vh; padding:20px; flex:1; } .second { background-color:yellow; // required for yellow background // if deleted background is pink } </style> </head> <body> <div class="container"> <div class="first"><p>Lorem ipsum dolor sit amet, elit. Ipsam soluta Lorem ipsum dolor sit amet, elit. Ipsam soluta</p></div> <div class="second"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis Ipsam voluptatibus soluta, consequuntur, reiciendis</p> <div class="a"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis</p></div> <div class="b"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis</p></div> <div class="c"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis</p></div> <div class="d"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis</p></div> </div> <div class="third"><p>Lorem ipsum dolor sit amet, elit. Ipsam soluta Lorem ipsum dolor sit amet, elit. Ipsam soluta</p></div> </div> </body> </html>