loading...

The CSS roadmap in the form of questions about Flexbox that will help you learn it completely

melnik909 profile image Stas Melnikov ・6 min read

A lot of people use flexbox every day. But I still face people who have some problems with it. Thus I have gathered the questions to help you learn flexbox completely. Also I added all tutorials that will help to find answers on these questions.

Questions

Q1. What's the position of the div and span elements the in following example?

<body>
  <div class="inline-flex">some text</div>
  <div class="inline-flex">some text</div>

  <span class="flex">some text</span>
  <span class="flex">some text</span>
</body>
Enter fullscreen mode Exit fullscreen mode
.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • What's a flex container?
  • What values of the display property create a flex container?
  • How are flex and inline-flex elements positioned by default?

Q2. What's the width and height computed value of the div elements in the following example?

<body>
  <div class="flex">some text</div>
  <div class="flex sizes">some text</div>

  <div class="inline-flex">some text</div>
  <div class="inline-flex sizes">some text</div>
</body>
Enter fullscreen mode Exit fullscreen mode
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.sizes {
  width: 100px;
  height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • How are the width and height properties of flex and inline-flex elements computed?

Q3. What's the position of the .child elements in the following example?

<body>
  <div class="parent">
    <div class="child">some text</div>
    <div class="child">some text</div>
  </div>
  <div class="parent parent-second">
    <span class="child">some text</span>
    <span class="child">some text</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
}

.parent-second {
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • What's the main and cross axis?
  • What does the flex-direction property do?
  • What values does the flex-direction property have?
  • How is the main axis direction changed depending on the flex-direction property?

Q4. What's the display computed value of the span elements in the following example?

<body>
  <div class="parent">
    <span class="first-child">some text</span>
    <span class="second-child">some text</span>
    <span class="third-child">some text</span>
    <span class="fourth-child">some text</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
}

.first-child {
  display: inline;
}

.second-child {
  display: inline-block;
}

.third-child {
  display: flex;
}

.fourth-child {
  display: table;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • What the value of the display property from flex items?

Q5. What's the position of the .child elements in the following example?

<body>
  <div class="parent">
    <div class="child">some text</div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
  flex-wrap: wrap-reverse;
  width: 500px;
  height: 300px;
}

.child {
  width: 100px;
  height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • What does the flex-wrap property do?
  • What values does the flex-wrap property have?

Q6. What's the gap between of the .first-child and .second-child elements in the following example?

<body>
  <div class="parent">
    <div class="first-child">some text</div>
    <div class="second-child">some text</div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
  flex-direction: column;
}

.first-child {
  margin-bottom: 20px;
}

.second-child {
  margin-top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • How does the margin property works inside of a flex container?

Q7. What's the position of the .child elements in following example?

<body>
  <div class="parent">
    <div class="child">some text</div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  width: 500px;
  height: 300px;
  display: flex;
}

.child {
  width: 100px;
  height: 100px;
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • How does the margin property with auto works inside of a flex container?

Q8. What's the position of the .child elements in the following example?

<body>
  <div class="parent">
    <span class="child">some text</span>
  </div>
  <div class="parent parent-second">
    <span class="child">some text</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  width: 500px;
  height: 300px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.parent-second {
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • What does the justify-content property do?
  • What values does the justify-content property have?
  • What does the align-items property do?
  • What values does the align-items property have?
  • How does the flex-direction property affect to the justify-content and align-items properties?

Q9. What's the position of the .child elements in the following example?

<body>
  <div class="parent">
    <span class="child">some text</span>
  </div>
  <div class="parent parent-second">
    <span class="child">some text</span>
  </div>
  <div class="parent">
    <span class="child coordinates">some text</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  width: 500px;
  height: 300px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.parent-second {
  align-items: stretch;
}

.child {
  width: 100px;
  height: 100px;
  position: absolute;
}

.coordinates {
  top: 20px;
  left: 20px;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • How are absolutely-positioned elements positioned inside of a flex container using the justify-content and align-items properties?
  • What is happens with absolutely-positioned elements, if a flex container has the align-items: stretch?
  • How are absolutely-positioned elements positioned inside of a flex container, if the top or right or bottom or left properties are set?

Q10. What's the width and height computed value of the .child elements in the following example?

<body>
  <div class="parent">
    <span class="child">some text</span>
  </div>
  <div class="parent parent-second">
    <span class="child">some text</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
}

.parent-second {
  flex-direction: column;
}

.child {
  flex-basis: 150px;
  width: 200px;
  height: 200px;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • If the flex-basis and width/height properties are defined at once, which one has priority?
  • How does the flex-direction property affect to the flex-basis property?

Q11. What's the width computed value of the .child elements in the following example?

<body>
  <div class="parent">
    <div class="child first-child">1</div>
    <div class="child second-child">2</div>
    <div class="child">3</div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
  width: 500px;
}

.child {
  width: 100px;
  height: 100px;
}

.first-child {
  flex-grow: 1;
}

.second-child {
  flex-grow: 3;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • What does the flex-grow property do?
  • What values does the flex-grow property have?
  • How is the flex grow factor computed?

Q12. What's the width computed value of the .child elements in the following example?

<body>
  <div class="parent">
    <div class="child first-child">1</div>
    <div class="child second-child">2</div>
    <div class="child third-child">3</div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
  width: 500px;
}

.child {
  width: 200px;
  height: 100px;
}

.first-child {
  flex-shrink: 2;
}

.second-child {
  flex-shrink: 3;
}

.third-child {
  flex-shrink: 0;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • What does the flex-shrink property do?
  • What values does the flex-shrink property have?
  • How is the flex shrink factor computed?

Q13. In what's the order of the span elements are displayed in the following example?

<body>
  <div class="parent">
    <span class="first-child">1</span>
    <span class="second-child">2</span>
    <span class="third-child">3</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
.parent {
  display: flex;
}

.first-child {
  order: 2;
}

.second-child {
  order: 1;
}
Enter fullscreen mode Exit fullscreen mode

What you need to know to answer the question

  • How does the order property change the elements' order inside of a flex container?

Resources

P.S. Friends don't forget to share this post, if you like it. Thus a lot of people can study that.

Also this post was written with the support of my patrons: Ashlea Gable, Tatiana Ten, Claire Collins, Ben Rinehart, Eva Jamen, Jesse Willard. Go to on my Patreon via this link to know what it is.

Posted on by:

melnik909 profile

Stas Melnikov

@melnik909

I help people to learn new things about HTML and CSS on Patreon platform

Discussion

pic
Editor guide