Solved

Flexbox in CSS3

Posted on 2016-11-17
2
45 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 200 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 54

    Accepted Solution

    by:
    Julian Hansen earned 300 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

    NAS Cloud Backup Strategies

    This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

    Question has a verified solution.

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

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    This article discusses how to create an extensible mechanism for linked drop downs.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    803 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