Flexbox in CSS3

    What does the following mean ? when will they be applied ?  Thx

    1.  @media all and (min-width: 768px)
    2.  .flex-container > *

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    .flex-container {
        display: -webkit-flex;
        display: flex;  
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        text-align: center;
    }
    
    .flex-container > * {
        padding: 15px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
    }
    
    .article {
        text-align: left;
    }
    
    header {background: black;color:white;}
    footer {background: #aaa;color:white;}
    .nav {background:#eee;}
    
    .nav ul {
        list-style-type: none;
    	padding: 0;
    }
    			
    .nav ul a {
    	text-decoration: none;
    }
    
    @media all and (min-width: 768px) {
        .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
        .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
        footer {-webkit-order:3;order:3;}
    }
    </style>
    </head>
    <body>
    
    <div class="flex-container">
    <header>
      <h1>City Gallery</h1>
    </header>
    
    <nav class="nav">
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
    </nav>
    
    <article class="article">
      <h1>London</h1>
      <p>London is the capital city of England. It is the most populous city in the United Kingdom,
      with a metropolitan area of over 13 million inhabitants.</p>
      <p>Standing on the River Thames, London has been a major settlement for two millennia,
      its history going back to its founding by the Romans, who named it Londinium.</p>
      <p><strong>Resize this page to see that what happens!</strong></p>
    </article>
    
    <footer>Copyright � W3Schools.com</footer>
    </div>
    
    </body>
    </html>
    

    Open in new window

    AXISHKAsked:
    Who is Participating?

    [Webinar] Streamline your web hosting managementRegister Today

    x
     
    Julian HansenConnect With a Mentor Commented:
    @media all and (min-width: 768px)
    

    Open in new window

    Is a media query. They are used in responsive design to change styles based on different media and screen widths.
    In this case the media all means all media (Screen and print)
    the min-width specifies the minimum screen width at which the style becomes active
    You can read more about them here
    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
    And here
    http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    In css the > operator means the immediate children so
    div {
      color: red;
    }
    body > div {
      color: blue;
    }
    <body>
         <div>This wil be blue
              <div> This will be red</div>
         </div>
    </body>
    

    Open in new window

    Sample here

    The * operator in CSS means match everything so
     .flex-container > *
    Means match all immediate children of elements with the .flex-container class.
    0
     
    SSupremeConnect With a Mentor Commented:
    1.  @media all and (min-width: 768px)
    it means that you can have special set of styling rules when <body> width is greater than 768px.
    .flex-container > *
    it specifies set of styles that all child elements within element (div in our case) with class flex-container will have. It applies all the time.
    0
    All Courses

    From novice to tech pro — start learning today.