Why is the two p-tags not beside each other when the screen is wide?

Question

When the browser width is more than 1000px the div.flex-container changes so that the to p-tags could be beside each others. They are however still above each other.

Wha

Answer 1

Flex is somewhat of a new property, as you highlighted before. It is pretty highly dependent upon your web browser so I will break it down for each of the major browsers:

Internet Explorer: This feature only works with IE 10+ and in fact, it only has one type of syntax which is below:

display:flexbox;

Safari: This feature only works with Safari 3.1+ and in fact.. uses the older versions of it:

display:box;

Chrome: This feature works in two ways. First, versions 21+ can use the modern version which is:

display:flex;

Second, versions 20- can only use the older versions (just like Safari)

FireFox: This is also works two ways. First, versions 2 through 21 use the old version (again, like Safari and Chromes Versions 20-). Second, versions 22+ will use the modern version(just as Chromes versions 21+).

Opera: This only works with 12.1+ and also supports the modern version (same as Firefox's versions 22+ and Chromes versions 21+).

With that being said, you need to be very clear as to what browser you are using. To get a better comprehensive guide on the use of flex and flex boxes, I would highly suggest the Almanac, the page I have linked will give you a walk through with the basics.

Answer 2

Using the column direction for Flexbox requires an explicit height in order for wrapping to work (see: http://codepen.io/cimmanon/pen/oyilE).

If you want to have newspaper style columns without using explicit heights, the multi-column module is what you're looking for.

http://codepen.io/cimmanon/pen/CcGlE

.flex-container {
  -webkit-columns: 20em;
  -moz-columns: 20em;
  columns: 20em;
}