Your Web News in One Place

Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

October 17, 2020 07:25 pm GMT

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

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.

Original Link: https://dev.to/melnik909/the-css-roadmap-in-the-form-of-questions-about-flexbox-that-will-help-learn-it-completely-23m7

Share this article:

Share on Facebook

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To