FAQ: Flexbox - justify-content

FAQ CSS FAQ
#1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “justify-content” exercise from the lesson “Flexbox”.

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

Web Development

FAQs on the exercise justify-content

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

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

Agree with a comment or answer? Like (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!

#2

On “Space-around” how this space are calculated? how can we decrease the space?

1 Like
#3

Hello, I assumed that if we want to apply flex properties to an element first we declare it is flex like;

display: flex;

But in this example, tutorial asked us to use justify-content property to change layout of the flex items. Should we tell that these items are flex first?

Here is the practice code;

body {
  border: 0;
  margin: 0;
  font-family: 'Roboto Mono', monospace;
}

h1 {
  text-align: center;
  display: block;
  font-size: 18px;
}

.container {
  height: 150px;
  width: 100%;
  display: flex;
  background-color: whitesmoke;
}

.box {
  height: 75px;
  width: 100px;
  background-color: dodgerblue;
  border: 1px solid lightgrey;
  display: inline-block;
}

#flexstart {
  justify-content: flex-start;
}

#flexend {
  justify-content: flex-end;
}

#center {
  justify-content: center;
}

#spacearound {
  justify-content: space-around;
}

#spacebetween {
  justify-content: space-between;
}

Thank you.

1 Like
#4

If we can assume they are all members (children) of .container then they all inherit that property.

3 Likes
#5

And I was suspicious why no one left such question but me! I haven’t noticed the flex declaretion in the .container. I looked twice but obviously not careful enough.

Thank you very much for your answer and time.

1 Like
#7

Let’s say we have a flex container with a width of 600px. Then, in this flex container, we have three flex items with widths of 100px. If we set the flex container’s justify-content property to space-around, equal amount of space will be added before and after each element. In this example, the space before and after each flex item will be 50px. This is because if we have a parent container with a width of 600px, and 3 flex items with widths of 100px, the flex items will only take up 300px of their parent container’s width in total. So, we can add 50px of space before and after each flex item which will reach 600px in total

Note that because equal space (50px) will be added before and after each flex item, double the amount of space will be added between each element

1 Like
#8

That’s not how I understood it…I thought that if we set an element’s display property to flex (or inline-flex) their child elements will be considered flex items. However, that does not mean that the flex items themselves have a display property of flex (or inline-flex)

#9

Right click any child element of a flex container and examine (inspect) the inherited properties in the CSS. I certainly cannot argue with you, apart from the assumption that children of a flex container are themselves flex containers. Let us know what you find out in your reading about flex inheritance.

1 Like
#10

As I expected, the flex items did not inherit the display property of their flex container. Instead, they just had their default display property

1 Like
#11

@mtf I am wondering one thing…in the justify-content lesson, it states that the justify-content property is used to position flex items from left to right. Then, for the align-items property, it states that align-items is used to align flex items vertically. However, I was wondering, couldn’t the purposes of each of these properties be switched if we changed the flex-direction to column?

If we set the flex-direction to column, wouldn’t the justify-content property align items vertically, and the align-items property align items horizontally?

#12

justify is a typesetting term that relates to how text aligns with the left and right margins. It does not relate to vertical alignment.

#13

Yet when we change the flex-direction to column, justify-content controls the vertical alignment of the flex items

#14

I guess in this day and age we should not be surprised when someone jumps out of the box. Regardless, be sure to apprise yourself of convention before drawing any conclusions. The goal is to have a stable UX that others can relate to. We may be breaking new ground but cannot throw the baby out with the bath water. Bottom line, learn, explore, experiment, but come back down to earth to check in, periodically. Don’t draw conclusions until you can back it up with best practice that is familiar to others on your collaboration team.

2 Likes
#15

Yeah, of course. Even though something is possible, we should always follow the best practices and conventions. Thanks for your help :grinning:

1 Like
#16

I found it extremely helpful to look at the MDN information on flexible box layout before diving into the Codecademy lessons. Codecademy has chosen to introduce aspects of flexbox in a different order than what you can find on the MDN. Getting an overview of the basic concepts of flexbox before diving into Codecademy’s lessons helped make the content much more understandable.

Hope this helps.

1 Like