root
/
css-mastery-16-master


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox columns: article teaser, auto margin trick</title>
  <script src="js/html5shiv.min.js"></script>
  <style>
    body {
      font-family: Georgia, Times New Roman, serif;
      line-height: 1.5;
      max-width: 70em;
      margin: 0 auto;
      padding: 1em;
    }
    
    .article-teaser-group {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: -webkit-box;
      display: -moz-box;
      display: flex;
    }

    .article-teaser {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: -webkit-box;
      display: -moz-box;
      display: flex;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
                 -moz-box-orient: vertical;
                 -moz-box-direction: normal;
              flex-direction: column;
      max-width: 20em;
      padding: 1em;
      margin: 1em;
      border: 1px solid #ccc;
    }
    .article-teaser h2 {
      font-family: Avenir, SegoeUI, Franklin Gothic, sans-serif;
      font-size: 1.25em;
      margin: 0 0 .5em 0;
    }
    .article-teaser-text {
      margin: .5em 0;
    }

    .article-teaser-text p {
      margin: 0 0 .5em;
    }
    /**
    * 1. This is a fix for a peculiar sizing bug on images in flexbox columns
    *    that appears to only happen in Chrome. The intrinsic dimensions of the
    *    image are taken to mean the main-axis size, and are interpreted as
    *    the minimum size. This distorts the aspect ratio of the image.
    *    Setting an explicit min-height value counters this problem.
    */
    .article-teaser img {
      width: 100%;
      min-height: 0; /* [1] */
      order: -1;
      margin: 0 0 .5em 0;
    }
    .article-teaser-more {
      margin-top: auto;
    }
    .article-teaser-more a {
      display: block;
      border-radius: .5em;
      background-color: #3372a0;
      font-family: Avenir, SegoeUI, Franklin Gothic, sans-serif;
      color: #fff;
      text-decoration: none;
      text-align: center;
      padding: .25em;
    }

  </style>
</head>
<body>
  <div class="article-teaser-group">
    <div class="article-teaser">
      <h2>The Dragon and other spaceships</h2>
      <div class="article-teaser-text">
        <p>There are actual spaceships,
          flying in space right now, probably. For example, there’s the International Space Station, which is 
          a spaceship of sorts. Well, actually it’s a space station, which is even cooler!</p>
        </div>
        <!-- image from SpaceX on Flick: https://flic.kr/p/rzuQdb -->
        <img src="images/medium_spaceship.jpg" alt="The Dragon spaceship in orbit around Earth.">
        <p class="article-teaser-more">
          <a href="/spaceships">Read the whole Spaceship article</a>
        </p>
      </div>
      <div class="article-teaser">
        <h2>Mission to mars</h2>
        <div class="article-teaser-text">
          <p>This is a pretty cool article about spaceships flying to Mars.</p>
        </div>
        <!-- image from SpaceX on Flick: https://flic.kr/p/xGdh8d -->
        <img src="images/medium_mars.jpg" alt="A spaceship about to land on Mars.">
        <p class="article-teaser-more">
          <a href="/spaceships">Read the whole Mars article</a>
        </p>
      </div>
    </div>
    
  </body>
  </html>