Miniter[04] Flexbox

####definition by MDN : the flex CSS property sets how a flex item will grow or shrink to fit the space available in its flex container.

I used flex property in order to display two boxes horizontally in my Miniter.

The two divboxes were displayed vertically by default, so I set the display of the body as flex like below.

//HTML

body {
  display: flex;
  background-color: #e6e6e6;
}

You have to set the display of the parent element flex in order to have the child elements displayed horizontally. You can also use a property called flex-direction in order to display your image in different ways. The properties are very straight forward.

.flex-container {
  display: flex;
  flex-direction: column, column-reverse, row, or row-reverse;
}

flex-wrap property specified whether you want the flex items wrapped or not. It would help you understand better if you try the examples from W3Schools in the link below. Flex-Wrap

justify-content property is used to align the flex items. I think this would be very helpful when you are trying to ditribute child elements evenly. It would help you understand better if you try the examples from W3Schools in the link below. Justify-Content