Topics

• Understanding what flexbox is and how it is used for layout;
• Process for making an element a flexbox container with display: flex;
• Using flexbox container properties to position child elements (flex items);
  • flex-direction;
  • justify-content;
  • flex-wrap;
  • align-items;
  • align-content;

Tutorials

• ADV Section 04, videos 031 – 041
• The following HTML and CSS pairs will need to be completed as part of the code-along and uploaded to your server:
  • index.html / flex.css (use this boilerplate HTML or zip )
  • sidebar.html / sidebar.css

Problem Set

Simple ReTweet cards with two modes: horizontal and vertical.

Using flexbox create two cards modeled after the images above. Using the same HTML, create classes that allow you to switch between horizontal and vertical just by adding or removing a class.

Your HTML boilerplate should look something like this:

<div class="card">
        <div class="card__media">
          <img src="img/portrait1.jpg" alt=""   class="card__image" />
        </div>
        <div class="card__content">
          <h2 class="card__title">Here's a cool ReTweet</h2>
          <p class="card__slug">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi,
            quisquam laboriosam!.
          </p>
        </div>
</div>

This is a pretty common HTML pattern for building card systems:

• div.card
  • div.card_media
    • img.card_image
  • div.card_content
    • h2.card_title
    • p.card_slug

You should put your cards in a div.container which you set to a max-width: 500px and set a margin: 0 auto to center the container.

For the blog

Describe the two flex container properties for affecting the position of flex items along the main axis and the cross axis. What are these two properties and what are some of the values that can be used?