Solved

Flexbox in CSS3

Posted on 2016-11-17
2
58 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 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 56

    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

    Announcing the Most Valuable Experts of 2016

    MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

    Question has a verified solution.

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

    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    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…

    756 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