• Register
100 points
5 1

It is true that a flex item cannot itself be a flexbox for its child elements.This statement is little bit difficult to understand if you are beginner in CSS and do not know how flex works.

Let me introduce this interesting topic of modern CSS to you.

What is Flex box?

A flex-box modal is a one dimensional layout that provides the efficient way of using spaces between items,proper alignments of various items and most important thing it is also mobile responsive.Actually flex-box modal is popular for its mobile responsiveness and reason of introducing in modern CSS.You can start to follow this modal by introducing one line statement in your css file.
 

Syntax

/*Make parent element a flex container*/
.image {  display: flex;}
                       OR
 .image {  display: inline-flex;}

Code without flex-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*here it will print 3 boxes in vertical direction*/
       .box {  width: 100px;  height: 100px;  background-color: #8cacea;  margin: 8px;}
        
    </style>
</head>
<body>
    
    <div >
          <div class="box">1</div>
          <div class="box">2</div>
          <div class="box">3
              
          </div>
        </div>
</body>
</html>

Code with flex-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*Here 3 boxes will show in row wise because of using inline-flex*/
       /*Use when you want to align items row wise*/
        .box {  width: 100px;  height: 100px;  background-color: #8cacea;  margin: 8px;display:inline-flex;}
        
    </style>
</head>
<body>
    
    <div >
          <div class="box">1</div>
          <div class="box">2</div>
          <div class="box">3
              
          </div>
        </div>
</body>
</html>

Inline-flex will create a flex-box container under which all elements it will adjust as per user requirements.Inside elements are known as flex-box items.If a flexbox doesn't wrap to a new line as it is resized, then the flex items will continue to shrink, still sharing the same row or column and flex-items cannot be the flex-box of its child elements.