Make a Website (Boundaries and Space)


#1

Good day guys , i have an enquiry regarding Exercise 9 of Make a Website (Boundaries and Space).
I would appreciate your help alot.

Here is the link : https://www.codecademy.com/courses/make-a-website/lessons/boundaries-space/exercises/display-flex?action=resume_content_item

Instructions
Before we start working with flex, expand the web browser view by clicking the arrow button in the top right corner. Take a moment to notice that the image gallery is arranged vertically and off-center.

Next, locate the .gallery class selector in main.css. Set the display property to flex.

Click Run to see the gallery images align horizontally.

HTML
image

CSS
image

Question 1: Understand that this exercise had instructed for the display property with flex value to be applied to .gallary class selector. However i was just playing around with the code and wonder why doesn’t it work the same if i had applied it to the .gallary-item selector instead? Shouldn’t it have worked just as fine?

Question 2: Noticed that applying display:inline to the .gallary-item selector would actually be a faster method of achieving the same results?

Question 3: Why doesn’t display:inline work on the .gallary selector?


#2

Bumpz , Anybody out there who could assist to resolve the above?


#3

Because it is a parent element. The property is not inherited by the children, but will affect the normal flow. This element would appear on the same line as the element preceding it.

gallery-items are children, so they would be a natural fit for display: inline or display: inline-block.

The opposite can be said of the display: flex rule. It belongs on the parent, and will be wrapping the children.


#4

I’m confused because according to Exercise 7 of Display and Positioning https://www.codecademy.com/courses/learn-css-display-positioning/lessons/css-display-positioning/exercises/display-inline?action=resume_content_item&course_redirect=learn-css, it states that “The CSS display property provides the ability to make any element an inline element. This includes elements that are not inline by default such as paragraphs, divs, and headings.”

Because it is a parent element.
I understand that div is a parent element which is a block element by default.

The property is not inherited by the children…
Understood that the property is not inherited by the children since nothing seems to be working.

but will affect the normal flow
If it affects the normal flow, in other words do you mean that the children elements would appear on the next line as block elements, even for tags such as image which are inline by default? I’m not quite sure what it means but based on what i assume it doesn’t make much sense.

This element would appear on the same line as the element preceding it.
I don’t actually see the .gallery element appearing on the same line as the .page-description element preceding it though.

CSS
image

HTML


#5

Those elements would not be affected. Normal flow may be affected, but it’s not easy to demonstrate.

I may have spoken too soon. For now just disregard that statement. If you ever encounter a situation where things are not going where they are supposed to, then it might be traced to a display property.

Generally, all elements follow normal flow unless they are floated left or right, or positioned absolutely (or fixed).


#6

Thank you so much once again.
Would like to reconfirm again that the following are only applicable for children elements and not parent elements?
image


#7

Parent elements can be either block or inline. There is no restriction. The display property of the parent is not inherited by the children, as I understand it.

<ul class="nav">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>
.nav li {
    display: inline-block;
}

The purpose of this rule is to override the default display property of LI, which is block by default. As an inline-block it will retain its block properties, but will take on the contraints given in the site style ruleset, and will be inline in normal flow. List items inline lose their bullets and the padding and margin that may have been inherited from the parent UL/OL.


#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.