Jump to content

kokopelli

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by kokopelli

    Flexbox question

    in CSS

    Posted

    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>

×
×
  • Create New...