0507 Flexbox, media query

| -Flexbox|--Define the
flexbox display: flex
|--Define the arrangement of the sub-elements flex-direction
|--Define the wrapping of the sub-elements flex-wrap
|--Define the alignment of the sub-elements
|--- - Horizontal alignment justify-content
|---- Vertical alignment align-intems

.parent{
    width: 800px;
    height: 400px;
    border: 1px solid red;
    display: flex;/*Define the parent element as a flexible box*/
    flex-direction: row;/*Set the arrangement of child elements*/
    flex-wrap: wrap;/*Set the wrapping method of child elements*/
    justify-content: space-between;/*Set the horizontal alignment of child elements*/
    align-items: auto;/*Set the vertical alignment of child elements*/
}
.children{
    width: 170px;
    height: 180px;
    border: 1px solid blue;
    flex:1;
    align-self: flex-start;
}
.children1{
    border: 1px solid black;
    flex: 3;
}

 

|-Media query
|--@media screen and (max-width:maximum width) and (min-width:minimum width)