Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Flexbox in CSS3

Posted on 2016-11-17
2
Medium Priority
?
87 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
    [X]
    Welcome to Experts Exchange

    Add your voice to the tech community where 5M+ people just like you are talking about what matters.

    • Help others & share knowledge
    • Earn cash & points
    • Learn & ask questions
    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 59

    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

    Enroll in October's Free Course of the Month

    Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

    Question has a verified solution.

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

    This article discusses four methods for overlaying images in a container on a web page
    Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    636 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