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.

What can I do to get them beside each other on wide screens and above each other on more narrow screens?

(Sorry, I changed the question here. Though I really can't understand what is happening. With "flex-direction: column" the p-tags are always above each other. Without it they are alwasy beside each other.)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
      .flex-container {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          max-width: 800px;
          min-height: 180px;
          border: red 2px solid;
      }
      @media (max-width: 1000px) {
          .flex-container {
              max-width: 400px;
          }
      }
      .flex-container p {
          flex: 1;
          -webkit-box-flex: 1;
          display: block;
          width: 300px;
          margin: 0px;
          margin-right: 20px;
          margin-bottom: 10px;
          border: red 2px solid;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <p>
        This page is for setting up the W+ bookmarklet and adding it
        to your brower's bookmarks bar.
      </p>
      <p>
        The idea of this bookmark is to help searching when you find
        something on a web page.  Maybe you see a book
        title that looks interesting?  Then you can start the W+
        bookmarklet and click the first word and the last word in
        the title.  That will give you a number of alternative
        ways to search for it.
      </p>
    </div>
  </body>
</html>

You can't put two p tags on the same line. After a p tag is declared, it breaks the line. OR you can put them in a div and have them display on the same line.. — BuddhistBeast, Dec 31 '13 at 03:13
http://stackoverflow.com/questions/10319483/h1-tag-and-p-tag-on-the-same-line will give you a better look at it. — BuddhistBeast, Dec 31 '13 at 03:20
Thanks again. I fiddled more with the example from Almanac (below) and it actually works there if I use "style: inline-block" for the p-tags. But -- when I change from "row" to "column" it just stacks the orange blocks above it other, unfortunately. Instead of wrapping to next column. — Leo, Dec 31 '13 at 04:16
Sweet! If everything worked out, then you could check that arrow next to my answer below that would be great! — BuddhistBeast, Dec 31 '13 at 04:25
Yes, this helped me. I realize after this I was looking for the wrong solution. What I actually want here seems to be newspaper style columns. I thought flex was the way to go. (It been some time since I checked this... ;-) ) So now I know the limits here. I will just use column-width: 400px in the div tag. (And that does not either work exactly as I expected, but... ;-) ) — Leo, Dec 31 '13 at 04:55

score 17 · Answer 1 · answered Dec 31 '13 at 20:39

17

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;
}

answered Dec 31 '13 at 20:39

cimmanon

67,211
17
165
171

6

Problem is that content flows per column. It often makes more sense to have it flow row style so most recent stuff is on top – Marc Apr 17 '15 at 13:13
3

@Marc What does that have to do with anything? Both column orientation for flexbox (which is what the OP is using) and columns flow by column. If that's not what you want, then this question does not apply to you. – cimmanon Apr 17 '15 at 13:35
1

split odd and even, then concat array, so newest top – MartianMartian Feb 14 '22 at 14:20

score 2 · Accepted Answer · answered Dec 31 '13 at 02:54

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.

Thanks @BuddhistBeast, I have read that page (but maybe not understood). At the moment I am just trying to get this to work in Chrome and I am actually only interested in the latest browsers for this. (I can afford that since it is not for a commercial site. ;-) ) I tested the first example from Almanac that you can edit on CODEPEN. Whatever I did it worked ---- until I changed from UL LI to DIV P! I can't say I am less confused yet, but there is at least something. ;-) — Leo, Dec 31 '13 at 03:33
I just tried it on codepen and it worked fine for me. Did you replace the UL with DIV and all of the LI's with P's? — BuddhistBeast, Dec 31 '13 at 03:50

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

2 Answers2

Linked