Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Flexbox in CSS3

Posted on 2016-11-17
2
Medium Priority
?
92 Views
Last Modified: 2016-11-20
    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

    0
    Comment
    Question by:AXISHK
    2 Comments
     
    LVL 16

    Assisted Solution

    by:SSupreme
    SSupreme earned 800 total points
    ID: 41892570
    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
     
    LVL 60

    Accepted Solution

    by:
    Julian Hansen earned 1200 total points
    ID: 41893332
    @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

    Featured Post

    What does it mean to be "Always On"?

    Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

    Question has a verified solution.

    If you are experiencing a similar issue, please ask a related question

    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    This article discusses how to create an extensible mechanism for linked drop downs.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
    This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
    Suggested Courses

    810 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question