Flex Box

Parent View - no flex

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - no flex
    
        <div>
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; align-items: stretch; flex-direction: column)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; align-items: stretch; flex-direction: column)
    
        <div class="parent" style="display: flex; align-items: stretch; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; align-items: flex-start; flex-direction: column)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; align-items: flex-start; flex-direction: column)
    
        <div class="parent" style="display: flex; align-items: flex-start; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; align-items: center; flex-direction: column)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; align-items: center; flex-direction: column)
    
        <div class="parent" style="display: flex; align-items: center; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; align-items: flex-end; flex-direction: column)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; align-items: flex-end; flex-direction: column)
    
        <div class="parent" style="display: flex; align-items: flex-end; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; align-items: stretch; flex-direction: row)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; align-items: stretch; flex-direction: row)
    
        <div  class="parent" style="display: flex; align-items: stretch; flex-direction: row;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; align-items: flex-start; flex-direction: row)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; align-items: flex-start; flex-direction: row)
    
        <div  class="parent" style="display: flex; align-items: flex-start; flex-direction: row;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; align-items: center; flex-direction: row)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; align-items: center; flex-direction: row)
    
        <div  class="parent" style="display: flex; align-items: center; flex-direction: row;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; align-items: flex-end; flex-direction: row)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; align-items: flex-end; flex-direction: row)
    
        <div  class="parent" style="display: flex; align-items: flex-end; flex-direction: row;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: flex-start)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: flex-start)
    
        <div class="parent" style="display: flex; justify-content: flex-start" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: center)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: center)
    
        <div class="parent" style="display: flex; justify-content: center" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: flex-end)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: flex-end)
    
        <div class="parent" style="display: flex; justify-content: flex-end" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: space-between)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: space-between)
    
        <div class="parent" style="display: flex; justify-content: space-between" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: space-around)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: space-around)
    
        <div class="parent" style="display: flex; justify-content: space-around" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: flex-start; flex-direction: column;)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: flex-start; flex-direction: column;)
    
        <div class="parent" style="display: flex; justify-content: flex-start; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: center; flex-direction: column;)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: center; flex-direction: column;)
    
        <div class="parent" style="display: flex; justify-content: center; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: flex-end; flex-direction: column;)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: flex-end; flex-direction: column;)
    
        <div class="parent" style="display: flex; justify-content: flex-end; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: space-between; flex-direction: column;)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: space-between; flex-direction: column;)
    
        <div class="parent" style="display: flex; justify-content: space-between; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; justify-content: space-around; flex-direction: column;)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; justify-content: space-around; flex-direction: column;)
    
        <div class="parent" style="display: flex; justify-content: space-around; flex-direction: column;" >
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex) + Child 2 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex) + Child 2 - (flex: 1)
    
        <div style="display: flex ">
            <div>                  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span>                 Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: row) + Child 2 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: row) + Child 2 - (flex: 1)
    
        <div style="display: flex; flex-direction: row ">
            <div>                  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span>                 Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: column) + Child 2 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: column) + Child 2 - (flex: 1)
    
        <div style="display: flex; flex-direction: column ">
            <div>                  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span>                 Child 3 - (span) </span>
        </div>

Parent View - (display: flex) + Child 2,3 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex) + Child 2,3 - (flex: 1)
    
        <div style="display: flex ">
            <div>                  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span style="flex: 1"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: row) + Child 2,3 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: row) + Child 2,3 - (flex: 1)
    
        <div style="display: flex; flex-direction: row ">
            <div>                  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span style="flex: 1"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: column) + Child 2,3 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: column) + Child 2,3 - (flex: 1)
    
        <div style="display: flex; flex-direction: column ">
            <div>                  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span style="flex: 1"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex) + Child 1,2,3 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex) + Child 1,2,3 - (flex: 1)
    
        <div style="display: flex ">
            <div style="flex: 1">  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span style="flex: 1"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: row) + Child 1,2,3 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: row) + Child 1,2,3 - (flex: 1)
    
        <div style="display: flex; flex-direction: row ">
            <div style="flex: 1">  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span style="flex: 1"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: column) + Child 1,2,3 - (flex: 1)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: column) + Child 1,2,3 - (flex: 1)
    
        <div style="display: flex; flex-direction: column ">
            <div style="flex: 1">  Child 1 - (div)  </div>
            <p style="flex: 1">    Child 2 - (p)    </p>
            <span style="flex: 1"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex) + Child 1,2,3 - (flex: 4,4,2)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex) + Child 1,2,3 - (flex: 4,4,2)
    
        <div style="display: flex ">
            <div style="flex: 4">  Child 1 - (div)  </div>
            <p style="flex: 4">    Child 2 - (p)    </p>
            <span style="flex: 2"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: row) + Child 1,2,3 - (flex: 4,4,2)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: row) + Child 1,2,3 - (flex: 4,4,2)
    
        <div style="display: flex; flex-direction: row ">
            <div style="flex: 4">  Child 1 - (div)  </div>
            <p style="flex: 4">    Child 2 - (p)    </p>
            <span style="flex: 2"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: column) + Child 1,2,3 - (flex: 4,4,2)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: column) + Child 1,2,3 - (flex: 4,4,2)
    
        <div style="display: flex; flex-direction: column ">
            <div style="flex: 4">  Child 1 - (div)  </div>
            <p style="flex: 4">    Child 2 - (p)    </p>
            <span style="flex: 2"> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: column; align-items: center) + Child 2 - (align-self: stretch)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: column; align-items: center) + Child 2 - (align-self: stretch) 
    
        <div style="display: flex; flex-direction: column; align-items: center">
            <div>                              Child 1 - (div)  </div>
            <p style="align-self: stretch">    Child 2 - (p)    </p>
            <span>                             Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: row; align-items: center) + Child 2 - (align-self: self-end)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: row; align-items: center) + Child 2 - (align-self: self-end) 
    
        <div style="display: flex; flex-direction: row; align-items: center">
            <div>                              Child 1 - (div)  </div>
            <p style="align-self: self-end">   Child 2 - (p)    </p>
            <span>                             Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: row-reverse; align-items: center; justify-content: center)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: row-reverse; align-items: center; justify-content: center) 
    
        <div style="display: flex; flex-direction: row-reverse; align-items: center; justify-content: center">
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>

Parent View - (display: flex; flex-direction: column-reverse; align-items: center; justify-content: center)

Child 1 - (div)

Child 2 - (p)

Child 3 - (span)
Parent View - (display: flex; flex-direction: column-reverse; align-items: center; justify-content: center) 
    
        <div style="display: flex; flex-direction: column-reverse; align-items: center; justify-content: center">
            <div>  Child 1 - (div)  </div>
            <p>    Child 2 - (p)    </p>
            <span> Child 3 - (span) </span>
        </div>