I'm having trouble understanding these questions from unit 4, the 11/24 test

The questions are:

"Imagine the flex items #alpha, #beta, and #gamma are each 100 pixels wide. How many pixels will separate the first flex item from the beginning of the row if its flex container has the following properties?

.flex-container {

  • display: flex;*
  • width: 390px;*
  • justify-content: space-around;*
    }

30 pixels
15 pixels
25 pixels
50 pixels"

How can I calculate this?
I’ve seen in another similar question on this forum and they indicated this link to an article, but I still couldn’t understand properly.

Is there an explanation question by question from codecademy to the tests applied?

Besides that one, I couldn’t figure out:

*"Imagine there are 60 extra pixels along a major axis and elements #alpha, #beta, and #gamma have the following flex-grow values. How many extra pixels will element #alpha have?

#alpha {
flex-grow: 2;
}

#beta {
flex-grow: 3;
}

#gamma {
flex-grow: 1;
}

40 pixels
30 pixels
10 pixels
20 pixels"*

this one too

*"Imagine the flex items #alpha, #beta, and #gamma are each 50 pixels wide. How many pixels will separate each item if their flex container (.my-flex-container) has the following properties?

.my-flex-container {
display: flex;
width: 300px;
justify-content: space-between;
}

25 pixels
50 pixels
75 pixels
100 pixels"*

Can you help me?

1 Like

There are three inner divs, each 100px wide. The parent container is 390px wide.

On the assumption that space around each div is equivalent on all four sides, that means,

3 * 100   => 300
390 - 300 =>  90    // space to be divided evenly
3 * 2     =>   6    // number of even divisions
90 / 6    =>  15    // space in front of first div

When we add up the flex-grow values on all three elements we get, 6. That means #alpha will get 2 / 6 of the change, or 1/3 of 60px => 20px.

Here we might assume there is no leading or trailing space, so,

3 * 50     => 150
300 - 150  => 150
150 / 2    => 75px   // space between

This all needs to be verified since I’m not looking at the lesson on Flex.

2 Likes