FAQ: Flexbox - inline-flex

Frequently Asked Questions CSS FAQ
1

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

This community-built FAQ covers the “inline-flex” exercise from the lesson “Flexbox”.

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

Web Development

FAQs on the exercise inline-flex

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

Is this an error of the lesson or am I missing something?

This is a part of the explanation of the exercise:

Possible lesson error

Why does it say 300px in the exercise explanation, but 150px in the example?

Here you can see the exercise

2 Likes
3

Hello.

If you study the HTML file closely, you notice that there are two “.child” elements nested in the “.container” element.
The CSS states that each “.child” element has a width of 150 pixels. So, since they appear side by side in the container (because of “display: inline-flex;”), their total width will be 300 pixels.

I hope that provided a little bit of clarity.

5 Likes
5

In the final example in the explanation section…
Shown above also by jorge-segura

the display: inline-flex; is within the .child element… rather than the .container element?
I thought that display: flex or display: inline-flex; were only used in the container elements to assign it to be a container?

As described in the page before
“To designate an element as a flex container, set the element’s display property to flex or inline-flex .”

7 Likes
6

i would also like to know the answer to your question

1 Like
7

Does Flexbox work (have any effect) when you position elements (flex items) absolutely or give them a fixed position?

1 Like
8

@mtf

If we use “inline-flex” instead of “flex”. Shouldn’t the output of the previous lesson

https://www.codecademy.com/courses/learn-intermediate-css/lessons/learn-flexbox/exercises/display-flex

look like the output of this lesson?

https://www.codecademy.com/courses/learn-intermediate-css/lessons/learn-flexbox/exercises/inline-flex

I tried making the changes. But the result is not like this lesson on inline-flex.

Here is the code for the previous lesson that I edited to have the output like the output of lesson 3. inline-flex.

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

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

.container {
  background-color: whitesmoke;
  display: inline-flex;
}

.box {
  background-color: dodgerblue;
  height: 75px;
  width: 75px;
  border: 1px solid turquoise;
}


---------------------------------------------------

<!DOCTYPE html>
<html>

<head>
  <title>Flex</title>
  <link href='style.css' rel='stylesheet' />
  <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>
</head>

<body>
  <h1>Display: Flex</h1>
  <div class='container'>
    <div class='box'>
      <h2>1</h2>
    </div>
    <div class='box'>
      <h2>2</h2>
    </div>
    <div class='box'>
      <h2>3</h2>
    </div>
  </div>
  <h1>Display: Block</h1>
  <div class='container'>
    <div class='box'>
      <h2>1</h2>
    </div>
    <div class='box'>
      <h2>2</h2>
    </div>
    <div class='box'>
      <h2>3</h2>
    </div>
  </div>
</body>

</html>
1 Like
9

If you look at the index.html files of the two lessons, I think the reason why you aren’t able to replicate the output is this line:
<h1>Display: Block</h1>
If you make the changes you have made to the “previous lesson” as you have posted AND you delete the <h1> line I have mentioned AND then click the browser window to full screen (there is a fullscreen icon in the top right corner), you will see the effect of inline-flex as intended.

Conversely, you can go to the “current lesson” and in index.html, insert a <h1> element before the second container div and see what happens.

10

You are correct in my mind.

When you move the code display: inline-flex from .child to .container rules in the CSS stylesheet this code makes sense.

Below you can see that display: inline-flex; is added to .container and commented out in .child.

.container {
    width: 200px;
    display: inline-flex;
    justify-content: center;

    
    border: 4px solid green;
  }
   
  .child {
    
    width: 500px;
    height: auto;
    /* display: inline-flex; */
    
    border: 4px solid yellow;

   
  }
1 Like
11

I’m so confused. On this page: https://www.codecademy.com/courses/learn-intermediate-css/lessons/learn-flexbox/exercises/display-flex

When I set the flex div to flex like it asked, the three elements moved to the same line, which I assume means they became inline.

However on this page that we’re on: https://www.codecademy.com/courses/learn-intermediate-css/lessons/learn-flexbox/exercises/inline-flex
it says this: * In the previous exercise, you might have observed that when we gave a div — a block level element — the display value of flex that it remained a block level element.*

But, to reiterate, when I gave that div a display value of flex, it did NOT remain a block level element. Does anyone know what’s going on?

12

I got stuck on this too, hope this can help to clarify.

When you set the display value to ‘flex’ on a parent element, it becomes a flex container. Its child elements will behave with an in-line flow, but the parent element remains having block flow within its own container.

Alternatively, you can set the parent to have a display of ‘inline-flex.’ This will have the same effect on its children, however the parent (the flex container), will now behave with an in-line flow within its own container.

It is a difference of inner and outer display properties. Inner referring to an element’s children, outer referring to how the element behaves with its own adjacent/parent elements.

13

Flex is a block element while inline-flex is an inline element.

14

What is the difference between inline-flex and inline-block?