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.

Discussion

pic
Editor guide
Collapse
gabroyal profile image
gabroyal

Nice