How does display: flex work?

HTML-CSS
1

Tell us what’s happening:
Hello, can somebody explain to me the use of flex? In this task I see that the two boxes are aligned next to each other after adding the line ```display: flex;```` but I still don’t get it.

  **Your code so far**


<style>
#box-container {
  height: 500px;
  display: flex;
}

#box-1 {
  background-color: dodgerblue;
  width: 50%;
  height: 50%;
}

#box-2 {
  background-color: orangered;
  width: 50%;
  height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15

Challenge: Use display: flex to Position Two Boxes

Link to the challenge:

2

Obviously in this instance flex moved the boxes from being 1 above the other to being side by side. It is more complicated then that and difficult to explain in a few sentences.
I would carry on with the next few questions for now which hopefully will begin to explain the uses of flex better. Basically it’s tool to help you lay out your page.
Ask again if you are still unclear when you’ve been through the next few questions.
Also youtube has some great videos on it

3

What specifically do you not get?

I guess a very brief explanation would be that it changes how child elements are laid out inside a parent element. When the parent is a flexbox container the children become flex items. It changes how the layout works and the child elements (even if they are block-level element types like a div) will be laid out in a row side-by-side. Sort of like if you were to set the display type on the child elements to inline/inline-block.

For more information on Flexbox, here are some links.

2 Likes
4

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