FAQ: Flexbox - Review: Flexbox

[wiki-bot]

This community-built FAQ covers the “Review: Flexbox” exercise from the lesson “Flexbox”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Review: Flexbox

• How do we decide when to use flexbox?

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!

Agree with a comment or answer? Like () to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

[bitjuggler]

I’m confused as to what is happening in step 1 of this exercise, and hoping someone can enlighten me please?

As per step 1, I added display:flex; at line 90. When I do this, the pictures swap from being arranged in rows to columns, but I don’t understand why. I had assumed I would need to make the .col div’s flex-boxes and set their flex-direction to column to achieve this.

I’m guessing I’m missing something fundamental about block vs inline.

Any clues would be greatly appreciated. Thanks.

style.css.txt (1.4 KB)

[arrayjumper21414]

Hi there,

When you set the display: flex at Step 1, you create a flex container but this flex container holds the columns, and not the pictures. This Step 1 takes the .col’s and stacks them on the top-left of the .cards container.

Later you deal with the .col class where you play with the images.
In other words, here we speak about the last topic of the course - nested flex boxes.

I hope this answers the quesiton.

[ericdao]

I was wondering what is the difference between using

display: flex
with
flex-wrap: wrap

compared to

display: inline-flex

Don’t both result in a container with children that will adjust themselves according to the width of the screen?

[microace27095]

I still don’t understand. The columns seem to be in-line, but we used the code display: flex. Shouldn’t the containers loos like rows from top to bottom?

[bilsner]

I feel this exercise would be more use if there was some sort of color/text indication of which images were in which containers as they just look like a jumble of photographs and to someone who was introduced to flex box about 30 minutes before, it’s easy to completely lose track of what is happening and why.

I could follow along ok in he previous exercises, but the last one was just a confusing mess because I had no visual clue to tell me which items were in which container.

Just a thought.

[nokereani]

If you want a better visual on which image batch belongs to which .col then do the following.

1. Control+Shift+C.
2. Click on any of the pictures
3. Check the HTML file and look into each
   and hover your mouse over to see the image.

This helps you see the actual image in each .col batch.

Step 1 for this lesson had me scratching my head on why after applying display: flex; that it would cause all of the .cards to display as columns when initially display: flex; should become a row. Each of the .col are all trying to start at the top left with the images displayed in a row but it does not have enough space to do so. This is what causes the .col images to look like a column.

You can see this yourself by changing the img width to something smaller until you start to see the familiar row layout from display flex.

Hopefully, this somewhat made sense and helped someone

[patkatko]

Is there a mistake or am I missing something? I thought that by align-items property, items are aligned either vertically or horizontally, relative to cross-axis, depending on the flex-direction.
I assumed that vertical and horizontal are objective measures and remain the same regardless of cross-axis position.

[cmsyth]

Hello everybody,

I am a bit confused about the last step of this exercise (In the .col ruleset, set the justify-content property to have a value of space-between). I don’t know what result I am expecting to see.

[beta9762830982]

Hi, it’s right that align-items property will work in accordance with flex-direction property (that is if “flex-direction: column;” then align-item will work horizontally and if “flex-direction: row” which is default then align-items will work vertically), since in the question it is not defined what is the flex-direction property is set for then we will assume the default value for flex-direction which is row, so, here align-items property will align the flex items vertically.

Hope this helps.

[a.sidorov]

Hello
Is anybody still reading this thread?

I have a question I can’t answer myself.

<div class="container">
    <h2 id="expertise">Our Expertise.</h2>

**<div class="main">**
 ** <div class="spacer">**
        <div class="cards">

          <div class="col">
            <img src="#">
            <img src="#">
            <img src="#">
          </div>

          <div class="col">
            <img src="#">
            <img src="#">
            <img src="#">
          </div>

          <div class="col">
            <img src="#">            
            <img src="#">
            <img src="#">
            <img src="#">
          </div>
          
        </div>
      </div>
    </div>
  </div>

Here is the HMTL of the flex part of the web. Is there any specific reason why do we need to add these two DIVs
<div class="main">
<div class="spacer">

Can’t we just style <div class="cards"> and <div class="col"> to do all the job?
Thank you

[rifathimel]

I haven’t got to that yet, but I’ll do that today and revert back.

Meanwhile, I’ve a query myself.

There’s no p tag used inside .jumbotron, yet we find a ruleset for it in the css sheet? Am I missing something here?

[rifathimel]

.main is providing the background color while .spacer gives you the division/section to play with the images -
Why is it needed? It’s a very good question. Thank you.

As you can see, .spacer acts a parent to house .cards (flexbox-containers) and .col (flexbox-items)
I’ve given each different background color to visualise its presence;

I commented out .col to view the container housing

.col{
background-color: lightcoral;
/* display: inline-flex;
flex-direction: column;
justify-content: space-between; */

}

Uncomment this line to see the difference as it re-distributes to acquire vacant space. Notice we are playing inside the container now

display: inline-flex;

Uncommenting the last two lines will finally give you the desired output ::

So, main & spacer takes care of background color & width while .cards & .col allows us freedom to use flexbox as container & items

[arc0581556936]

Upon googling class: spacer, some results show that it is no longer supported in HTML5. Is this true?

[rifathimel]

in the above code snippet, we have named the class of our div, as “spacer” (not a property) - it could have been anything else, say <div class="parent-container’>.