search

freeCodeCamp / CurriculumExpansion

Creative Commons Attribution Share Alike 4.0 International
313 stars 104 forks source link

CSS Flexbox Challenges #21

Closed QuincyLarson closed 7 years ago

QuincyLarson commented 8 years ago

@atjonathan and @alayek are charge of coordinating the expansion of these challenges, but they need your help.

For each challenge, please reply to this GitHub issue with:

  1. Challenge description text
  2. Test suite (using the assert method)
  3. The seed code, which is pre-populated in the editor at the beginning of the challenge
  4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

List of challenges:

Here's the final thing we would be building throughout the course:

https://jsfiddle.net/5epums9j/16/

ghost commented 8 years ago

I will head the team for this along with another camper I know is interested.

QuincyLarson commented 8 years ago

@arirawr has already started work on this. She has agreed to be topic owner for our Flexbox challenges..

Greenheart commented 8 years ago

http://flexboxfroggy.com/ is an awesome browser-based interactive tutorial!

QuincyLarson commented 8 years ago

@arirawr sorry for the confusion there - I didn't realize you'd self-assigned and I was going to check in and confirm with you. I'll be around https://gitter.im/freecodecamp/curriculumdevelopment all weekend - let me know if I can answer any questions or facilitate.

alayek commented 8 years ago

Hey @arirawr hope you are making progress on this. If you need any clarification or help with anything, kindly let me know.

QuincyLarson commented 8 years ago

I haven't heard from @arirawr in a while, and we need to take action on this. She is running a company so she may not have time to help with this. Would anyone else be interested in taking over as topic owner?

alayek commented 8 years ago

@QuincyLarson yeah, I couldn't reach her either. Maybe you can assign this one to me as well; and either I will do it myself, or reach out to some camper to submit some challenges. I am sure we can find plenty of people who are active and know these things. Better have an owner than none.

erictleung commented 8 years ago

I probably won't have the bandwidth to assist with this, but I've bumped into some resources that may help whoever takes this up:

Some other resources that appear to be useful

alayek commented 8 years ago

Thanks @erictleung !! Let me try to add some challenges here.

ghost commented 8 years ago

I will head this with @alayek .

QuincyLarson commented 8 years ago

@alayek and @atjonathan Thanks for taking this over! Yes - once you have a list of challenge titles, both of you have write permission so feel free to update my original post to include a checklist of challenges :)

alayek commented 8 years ago

Flexbox is about positioning

Challenge Text

Any UI is made up of two things

  • Right colors, fonts, images etc. visual elements
  • Right placement or positioning of the elements

In this section, we would focus on placing the elements the right way, that is, browser and screen width independent.

We will use flexbox to achieve this. Flexbox is a relatively new construct, supported by all modern major browsers, and it gives a nice way to control placing your elements in the webpage.

No more CSS float or inline-block.

Over the course of this section on flexbox, we would be building a simple tweet component, as shown on the right.

Instruction Oh you don't need to do anything other than stare at the sample tweet component and thing of how > you would implement it.

Note We would use SCSS over here, and not vanilla CSS. So, you might want to cover our SCSS section first

Challenge Code

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header, footer {
  display: flex;
  flex-direction: row;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    margin: 0;
    display: flex;
    align-items: center;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {  
  .stats {
    display: flex;
    flex-direction: row;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}
QuincyLarson commented 8 years ago

@alayek this is the introduction challenge?

alayek commented 8 years ago

@QuincyLarson Yeah, I think we might need to revisit this one, once we have added the others.

QuincyLarson commented 8 years ago

@alayek Well you're off to a good start. This looks great :) You still have a few days, as it is taking me time to transfer everything over to the seed files :)

ghost commented 8 years ago

Using display: flex with our two boxes

Challenge Description

In these challenges, we will often have a theory based challenge and then a practical challenge where you apply what you have learned to flexify your tweet embed!

Adding display: flex allows us to use other flex properties like justify-content and flex-basis which we will learn about later on in the challenges.

Instructions

Using CSS, add display: flex to both boxes using #box-1 and #box-2.

Challenge Seed

<div id="box-1"></div>
<div id="box-2"></div>
#box-1 {
    background-color: dodgerblue;
    width: 500px;
    height: 500px;
}

#box-2 {
    background-color: orangered;
    width: 500px;
    height: 500px;
}

Challenge Tests

assert($('#box-1').css('display') == 'flex', 'message: <code>#box-1</code> should be using <code>display: flex</code>.'),
assert($('#box-2').css('display') == 'flex', 'message: <code>#box-2</code> should be using <code>display: flex</code>.')

Challenge Solution

<div id="box-1"></div>
<div id="box-2"></div>
#box-1 {
    display: flex;
    background-color: dodgerblue;
    width: 500px;
    height: 500px;
}

#box-2 {
    display: flex;
    background-color: orangered;
    width: 500px;
    height: 500px;
}
ghost commented 8 years ago

Adding Flex superpowers to our tweet embed

Challenge Description

Now that we know how about display: flex, we can add it to our tweet embed.

Instructions

Add display: flex to the following items:

  • header
  • footer
  • h3
  • h4
  • .profile-name
  • .follow-btn
  • .stats

Challenge Seed

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    margin-left: 10px;
  }

  .follow-btn {
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {  
  .stats {
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}

Challenge Tests

assert($('header').css('display') == 'flex', 'message: Your <code>header</code> tag should be using <code>display: flex</code>.'),
assert($('footer').css('display') == 'flex', 'message: Your <code>footer</code> tag should be using <code>display: flex</code>.'),
assert($('h3').css('display') == 'flex', 'message: Your <code>h3</code> tag should be using <code>display: flex</code>.'),
assert($('h4').css('display') == 'flex', 'message: Your <code>h4</code> tag should be using <code>display: flex</code>.'),
assert($('.profile-name').css('display') == 'flex', 'message: Your <code>.profile-name</code> element should be using <code>display: flex</code>.'),
assert($('.follow-btn').css('display') == 'flex', 'message: Your <code>.follow-btn</code> element should be using <code>display: flex</code>.'),
assert($('.stats').css('display') == 'flex', 'message: Your <code>.stats</code> element should be using <code>display: flex</code>.')

Challenge Solution

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header {
  display: flex;

  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  display: flex;

  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}
QuincyLarson commented 8 years ago

@atjonathan you've done great work on these Flexbox challenges so far. Can you commit to finishing these last few challenges this week?

ghost commented 8 years ago

@QuincyLarson, me and @alayek should be able to get these done :smile:

reedyDowns commented 8 years ago

@atjonathan Unless I am misunderstanding the challenge or format for "Using display: flex with our two boxes", shouldn't there be a #box-2 in the challenge solution and/or seed since #box-2 is in the challenge test?

ghost commented 8 years ago

@reedydowns, thanks for catching that! Typo fixed :wink:

zaclem01 commented 8 years ago

@atjonathan I was curious if anymore help was needed with this? I have some time that I could work on a challenge or two. Please let me know :smile:

zaclem01 commented 8 years ago

Also, I'm not sure if this falls in the purview of a flexbox introduction lesson, but I was thinking that having a section on nesting flexboxes might be useful as well. I've found that flexboxes with (or without even) nesting can duplicate much of the functionality of the grid system of Bootstrap, Skeleton, etc.

ghost commented 8 years ago

@zaclem01, your help would be greatly appreciated! Feel free to work on that section too, but it might be worth getting our current challenges out of the way first 😄

zaclem01 commented 8 years ago

@atjonathan Great! Any sections I should avoid that you all already have in process?

zaclem01 commented 8 years ago

Using flex-direction: row with our two boxes

Challenge

By adding display: flex we are now able to do things like align the children on the flex container (the element with display: flex) into rows or columns. We can do this by adding the flex-direction property.

Note: The default setting for flex-direction is row.

Instructions

Using CSS, add flex-direction: row to the #box-container.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
    display: flex;
}

#box-1 {
    background-color: dodgerblue;
    width: 500px;
    height: 500px;
}

#box-2 {
    background-color: orangered;
    width: 500px;
    height: 500px;
}

Challenge Tests

assert($('#box-container').css('flex-direction') == 'row', 'message: <code>#box-container</code> should be using <code>flex-direction: row</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
    display: flex;
    flex-direction: row;
}

#box-1 {
    background-color: dodgerblue;
    width: 500px;
    height: 500px;
}

#box-2 {
    background-color: orangered;
    width: 500px;
    height: 500px;
}
zaclem01 commented 8 years ago

Aligning our header and footer horizontally

Challenge

It's time to look at our tweet embed again. Let's align our header and footer into rows using flex-direction: row.

Note: Remember that the default setting is row, but for the purpose of this exercise, we will be adding it explicitly.

Instructions

Using CSS, add flex-direction: row to:

  • header
  • footer

Challenge Seed

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header {
  display: flex;

  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  display: flex;

  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}

Challenge Tests

assert($('header').css('flex-direction') == 'row', 'message: <code>header</code> should be using <code>flex-direction: row</code>.'),
assert($('footer').css('flex-direction') == 'row', 'message: <code>footer</code> should be using <code>flex-direction: row</code>.')

Challenge Solution

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header, footer {
  display: flex;
  flex-direction: row;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}
zaclem01 commented 8 years ago

Using flex-direction: column with our two boxes

Challenge

Recall that we flex-direction can also be used to arrange items in a flex container element into columns. Let's do this with our two boxes.

Instructions

Using CSS, add flex-direction: column to the #box-container.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
    display: flex;
}

#box-1 {
    background-color: dodgerblue;
    width: 500px;
    height: 500px;
}

#box-2 {
    background-color: orangered;
    width: 500px;
    height: 500px;
}

Challenge Tests

assert($('#box-container').css('flex-direction') == 'column', 'message: <code>#box-container</code> should be using <code>flex-direction: column</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
    display: flex;
    flex-direction: column;
}

#box-1 {
    background-color: dodgerblue;
    width: 500px;
    height: 500px;
}

#box-2 {
    background-color: orangered;
    width: 500px;
    height: 500px;
}
zaclem01 commented 8 years ago

Aligning our header and footer vertically

Challenge

Our header and footer are starting to take shape. Let's clean up the profile name a little by using flex-direction: column to arrange the flex items inside .profile-name vertically.

Instructions

Using CSS, add flex-direction: column to:

  • .profile-name

Challenge Seed

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header, footer {
  display: flex;
  flex-direction: row;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}

Challenge Tests

assert($('.profile-name').css('flex-direction') == 'column', 'message: <code>.profile-name</code> should be using <code>flex-direction: column</code>.')

Challenge Solution

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header, footer {
  display: flex;
  flex-direction: row;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}
ghost commented 8 years ago

@zaclem01, nope! All are up for grabs!

zaclem01 commented 8 years ago

Justifying content with relative alignment using justify-content

Challenge

Often times we would like to align the flex items inside the flex container relative to the main axis or distribute the space between flex items along the main axis. To accomplish this, we can use the justify-content property.

There are several settings accepted by justify-content. One of the most commonly used is justify-content: center, which will align all flex items inside the flex container center relative to the main axis. Others include:

  • flex-start - align items to the start of the flex container relative to the main axis
  • flex-end - align items to the end of the flex container relative to the main axis
  • space-between - align items to the center of the main axis, with extra space distributed between the items, and the first and last items pushed to the very edge of the flex container
  • space-around - similar to space-between but with the first and last items included when distributing the extra space

Let's try to apply this to the two boxes.

Note: The main axis refers to the direction in which items are arranged. For rows, the main axis will run horizontally. For columns, the main axis will run vertically.

Instructions

Using CSS, add justify-content: center to the #box-container.

Extra: Experiment with the other options as well, but only justify-content: center will be accepted as the correct answer.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  background: gray;
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    width: 200px;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    width: 200px;
    height: 200px;
}

Challenge Tests

assert($('#box-container').css('justify-content') == 'center', 'message: <code>#box-container</code> should be using <code>justify-content: center</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  background: gray;
  display: flex;
  justify-content: center;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    width: 200px;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    width: 200px;
    height: 200px;
}
zaclem01 commented 8 years ago

Aligning .profile-name using justify-content

Challenge

Now that we have seen justify-content in action, we can apply it to .profile-name to align the flex items inside it.

Instructions

Using CSS, add justify-content to:

  • .profile-name

Use whichever setting for justify-content that you wish.

Challenge Seed

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header, footer {
  display: flex;
  flex-direction: row;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}

Challenge Tests

assert($('.profile-name').css('justify-content') == 'center' || $('.profile-name').css('justify-content') == 'flex-start' || $('.profile-name').css('justify-content') == 'flex-end' || $('.profile-name').css('justify-content') == 'space-between' || $('.profile-name').css('justify-content') == 'space-around', 'message: <code>.profile-name</code> should be using <code>flex-direction: column</code>.')

Challenge Solution

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header, footer {
  display: flex;
  flex-direction: row;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}
zaclem01 commented 8 years ago

Aligning items with respect to baseline using align-items

Challenge

align-items works similarly to justify-content, except that it aligns flex items relative to the cross axis.

The settings include:

  • flex-start - align items to the start of the flex container in relative to the cross axis
  • flex-end - align items to the end of the flex container in relative to the cross axis
  • center - align items to the center of the cross axis
  • stretch - stretch the items to fill the flex container relative to the cross axis
  • baseline - align items to their baselines

Let's try to apply this to the two boxes.

Note: The cross axis refers to the direction in which items are arranged. For rows, the cross axis will run vertically. For columns, the cross axis will run horizontally.

Instructions

Using CSS, add align-items: center to the #box-container.

Extra: Experiment with the other options as well, but only align-items: center will be accepted as the correct answer.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  background: gray;
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    width: 200px;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    width: 200px;
    height: 200px;
}

Challenge Tests

assert($('#box-container').css('align-items') == 'center', 'message: <code>#box-container</code> should be using <code>align-items: center</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  align-items: center;
  background: gray;
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    width: 200px;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    width: 200px;
    height: 200px;
}
zaclem01 commented 8 years ago

Using align-items with our .follow-btn, h3 and h4 elements

Challenge

You know the drill! Let's align some content in our tweet embed with align-items.

Instructions

Using CSS, add align-items: center to:

  • .follow-btn
  • h3
  • h4

Challenge Seed

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header, footer {
  display: flex;
  flex-direction: row;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
  }

  .follow-btn {
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}

Challenge Tests

assert($('.follow-btn').css('align-items') == 'center', 'message: <code>.follow-btn</code> should be using <code>align-items: center</code>.'),
assert($('h3').css('align-items') == 'center', 'message: <code>h3</code> should be using <code>align-items: center</code>.'),
assert($('h4').css('align-items') == 'center', 'message: <code>h4</code> should be using <code>align-items: center</code>.')

Challenge Solution

<header>
  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>
      <i class="fa fa-twitter"></i>&nbsp;Follow
    </button>
  </div>
</header>
<div id="inner">
  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>
  <span class="date">7:24 PM - 17 Aug 2016</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="retweets">
      <strong>5</strong> RETWEETS
    </div>
    <div class="likes">
      <strong>28</strong> LIKES
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">
      <i class="fa fa-share"></i>
    </button>
    <button class="retweet-btn">
      <i class="fa fa-retweet"></i>
    </button>
    <button class="like-btn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</footer>
body {
  font-family: Arial, sans-serif;
}

header, footer {
  display: flex;
  flex-direction: row;
}

header {
  .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .profile-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
  }

  .follow-btn {
    align-items: center;
    display: flex;
    margin: 0 0 0 auto;

    button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }

    i {
      color: #4099FF;
    }
  }

  h3, h4 {
    align-items: center;
    display: flex;
    margin: 0;
  }
}

#inner {
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  hr {
    margin: 20px 0;
    opacity: 0.1;
    border-style: solid;
  }
}

footer {
  .stats {
    display: flex;
    font-size: 15px;

    strong {
      font-size: 18px;
    }

    .likes {
      margin-left: 10px;
    }
  }
  .cta {
    margin-left: auto;

    button {
      border: 0;
      background: transparent;
    }
  }
}
zaclem01 commented 8 years ago

I think I can finish the rest a bit later today.

Let me know if any changes are needed!

ghost commented 8 years ago

@zaclem01 awesome!

zaclem01 commented 8 years ago

Using flex-wrap on our boxes

Challenge

What happens when we want to split up our flex items into multiple rows (or columns)? By default, a flex container will fit all flex items onto one line, but with the flex-wrap property, multiple rows/columns will be used.

Similar to Bootstrap's grid system, flex-wrap will cause the excess items to wrap into a new row or column. Where the wrapping occurs is dependent upon the size of the items and the container.

You can also control the direction of the wrap.

The settings include:

  • nowrap - default setting, do not wrap items
  • wrap - wrap items from left-to-right if row or top-to-bottom if column
  • wrap-reverse - wrap items from right-to-left if row or bottom-to-top if column

Looks like we have too many boxes for one row this time. We're going to fix this with flex-wrap.

Instructions

Using CSS, add flex-wrap: wrap to the #box-container.

Extra: Experiment with the other options as well, but only flex-wrap: wrap will be accepted as the correct answer.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
    <div id="box-3"></div>
    <div id="box-4"></div>
    <div id="box-5"></div>
    <div id="box-6"></div>
</div>
#box-container {
  background: gray;
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    width: 200px;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    width: 200px;
    height: 200px;
}

#box-3 {
    background-color: violet;
    width: 200px;
    height: 200px;
}

#box-4 {
    background-color: yellow;
    width: 200px;
    height: 200px;
}

#box-5 {
    background-color: green;
    width: 200px;
    height: 200px;
}

#box-6 {
    background-color: black;
    width: 200px;
    height: 200px;
}

Challenge Tests

assert($('#box-container').css('flex-wrap') == 'wrap', 'message: <code>#box-container</code> should be using <code>flex-wrap: wrap</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
    <div id="box-3"></div>
    <div id="box-4"></div>
    <div id="box-5"></div>
    <div id="box-6"></div>
</div>
#box-container {
  background: gray;
  display: flex;
  flex-wrap: wrap;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    width: 200px;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    width: 200px;
    height: 200px;
}

#box-3 {
    background-color: violet;
    width: 200px;
    height: 200px;
}

#box-4 {
    background-color: yellow;
    width: 200px;
    height: 200px;
}

#box-5 {
    background-color: green;
    width: 200px;
    height: 200px;
}

#box-6 {
    background-color: black;
    width: 200px;
    height: 200px;
}
zaclem01 commented 8 years ago

Using flex-shrink on our boxes

Challenge

All the properties that we've discussed so far have applied to the flex container (the parent of the flex items). However, there are several useful properties that can be used directly on the flex items.

The first we will discuss is flex-shrink. It describes the ability of an item to shrink when the flex container is smaller than the combined width of the flex items.

For example, if one item has a flex-shrink value of 1 and the other has a flex-shrink value of 3, the one with the value of 3 will shrink three times as much as the other.

We can apply this principle to make our boxes adjust when shrinking.

Instructions

Using CSS, add flex-shrink: 1 to #box-1 and flex-shrink: 2 to #box-2.

Shrink the window to see how the boxes are affected.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    width: 100%;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    width: 100%;
    height: 200px;
}

Challenge Tests

assert($('#box-1').css('flex-shrink') == '1', 'message: <code>#box-1</code> should be using <code>flex-shrink: 1</code>.'),
assert($('#box-2').css('flex-shrink') == '2', 'message: <code>#box-2</code> should be using <code>flex-shrink: 2</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    flex-shrink: 1;
    width: 100%;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    flex-shrink: 2;
    width: 100%;
    height: 200px;
}
zaclem01 commented 8 years ago

Using flex-grow on our boxes

Challenge

The reverse of flex-shrink is flex-grow. Whereas flex-shrink controls the size of the items when the container shrinks, flex-grow controls the size of items when the container grows (go figure).

Using the same type of example, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.

We can apply this principle to make our boxes adjust when the container grows.

Instructions

Using CSS, add flex-grow: 1 to #box-1 and flex-grow: 2 to #box-2.

Expand the window to see how the boxes are affected.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    flex-basis: 10em;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    flex-basis: 10em;
    height: 200px;
}

Challenge Tests

assert($('#box-1').css('flex-grow') == '1', 'message: <code>#box-1</code> should be using <code>flex-grow: 1</code>.'),
assert($('#box-2').css('flex-grow') == '2', 'message: <code>#box-2</code> should be using <code>flex-grow: 2</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    flex-basis: 10em;
    flex-grow: 1;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    flex-basis: 10em;
    flex-grow: 2;
    height: 200px;
}
zaclem01 commented 8 years ago

Using flex-basis on our boxes

Challenge

You may have noticed a new property in the previous example called flex-basis. This property specifies the initial size of the item before any extra space is distributed, either by flex-shrink or flex-grow.

The units for flex-basis can be any used for size properties (px, em, %, etc). The value auto can also be used, which sizes items based on their content.

In this example, we will set the initial size of the boxes using flex-basis.

Instructions

Using CSS, add flex-basis: 10em to #box-1 and flex-basis: 20em to #box-2.

Expand the window to see how the boxes are affected.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    height: 200px;
}

Challenge Tests

assert($('#box-1').css('flex-basis') == '10em', 'message: <code>#box-1</code> should be using <code>flex-basis: 10em</code>.'),
assert($('#box-2').css('flex-basis') == '20em', 'message: <code>#box-2</code> should be using <code>flex-basis: 20em</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    flex-basis: 10em;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    flex-basis: 20em;
    height: 200px;
}
zaclem01 commented 8 years ago

Using flex shorthand on our boxes

Challenge

flex-shrink, flex-grow, and flex-basis can all be set using the flex shorthand.

For example, flex: 1 0 10px will set the item to flex-grow: 1, flex-shrink: 0, and flex-basis: 10px. By default, the property is flex: 0 1 auto.

Instructions

Using CSS, add flex: 2 2 150px to #box-1 and flex: 1 1 150px to #box-2.

These values will cause #box-1 to be twice the size of #box-2 when the container is greater than 300px (the combined size of flex-basis for both boxes) and half the size of #box-2 when the container is less than 300px.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    height: 200px;
}

Challenge Tests

assert($('#box-1').css('flex') == '2 2 150px', 'message: <code>#box-1</code> should be using <code>flex: 2 2 150px</code>.'),
assert($('#box-2').css('flex') == '1 1 150px', 'message: <code>#box-2</code> should be using <code>flex: 1 1 150px</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    flex: 2 2 150px;
    height: 200px;
}

#box-2 {
    background-color: orangered;
    flex: 1 1 150px;
    height: 200px;
}
zaclem01 commented 8 years ago

Using order on our boxes

Challenge

The order property is used to change the which order the items appear in. By default, items will appear in source order.

Negative numbers can be used for this property value.

We will use order to change the order the boxes are displayed.

Instructions

Using CSS, add order: 2 to #box-1 and order: 1 to #box-2.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    height: 200px;
    width: 200px;
}

#box-2 {
    background-color: orangered;
    height: 200px;
    width: 200px;
}

Challenge Tests

assert($('#box-1').css('order') == '2', 'message: <code>#box-1</code> should be using <code>order: 2</code>.'),
assert($('#box-2').css('order') == '1', 'message: <code>#box-2</code> should be using <code>order: 1</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    order: 2;
    height: 200px;
    width: 200px;
}

#box-2 {
    background-color: orangered;
    order: 1;
    height: 200px;
    width: 200px;
}
zaclem01 commented 8 years ago

OK, I think that's all I have for today.

hamzashezad commented 8 years ago

@alayek A link in the intro challenge to the flex layout box model would be great. Or just this image explaining the axes.

QuincyLarson commented 8 years ago

@zaclem01 first of all, thank you for all your hard work. You have accomplished a lot in a short time. These look really solid!

If you have time to build those other challenges, great. We still have about 2 weeks before we're planning to push all this to production.

There are other sections where we could use your help, too, such as React and our User Experience section (we still need to decide which UX concepts we can teach in the browser). Would you be interested in helping with either of these?

@alayek @hamzashezad I agree that that image would be helpful in explaining the axes. It comes from w3.org so I think we can use it with no licensing issues.

zaclem01 commented 8 years ago

@QuincyLarson Thanks! I can definitely take a look at React sections and see if I can contribute.

I agree with the axes explanation as well. I didn't want to include any visuals in case of licensing issues, but if you all have one, I think it would clarify a lot.

zaclem01 commented 8 years ago

Using align-self on our boxes

Challenge

The final flex item property is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once.

This is useful since float, clear, and vertical-align do not affect flex items.

align-self accepts the same values as align-items and will override any value set by align-items.

Instructions

Using CSS, add align-self: center to #box-1 and align-self: flex-end to #box-2.

Challenge Seed

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    height: 200px;
    width: 200px;
}

#box-2 {
    background-color: orangered;
    height: 200px;
    width: 200px;
}

Challenge Tests

assert($('#box-1').css('align-self') == 'center', 'message: <code>#box-1</code> should be using <code>align-self: center</code>.'),
assert($('#box-2').css('align-self') == 'flex-end', 'message: <code>#box-2</code> should be using <code>align-self: flex-end</code>.')

Challenge Solution

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
    background-color: dodgerblue;
    align-self: center;
    height: 200px;
    width: 200px;
}

#box-2 {
    background-color: orangered;
    align-self: flex-end
    height: 200px;
    width: 200px;
}
HKuz commented 8 years ago

Hi folks, I'm going through the QA process and want to raise a point for discussion for this section. The challenges (as noted at the top) are using Sass syntax for CSS, but the section itself is currently in the Responsive Web Design segment, well before Sass is introduced in Front End Libraries (noted in the Sequencing issue here). I've been removing Bootstrap references/uses up front because campers will not have been introduced to it yet, and we don't want to confuse or discourage folks out of the gate. This is a similar debate. I see three options for what we do, with what I think are the pros/cons of each - would love to get this group's thoughts @QuincyLarson @atjonathan @alayek @zaclem01

1) Keep challenges as they are, move the Flexbox section to Front End Libraries, after the Sass part

2) Keep the ordering as it is, remove Sass from the CSS

3) Keep the ordering as it is, keep the challenges as they are, refer campers new to Sass to jump ahead to that section

Of course, If I'm missing any other options or pros/cons, please please them 😄

ghost commented 8 years ago

I believe option 1 is the best course of action ❗

QuincyLarson commented 8 years ago

@HKuz I think 2) Keep the ordering as it is, remove Sass from the CSS is the best approach if @zaclem01 has a moment to rework the handful of challenges that involve Sass. Putting this right after the responsive design section is ideal. If @zaclem01 doesn't have time to do this in the next few days, then we could temporarily but it in the Front End Libraries section, though technically Flexbox is part of CSS3.