Dlaczego dwa znaczniki p nie są obok siebie, gdy ekran jest szeroki?

Question

Dec 31, 2013, 02:51 AM

Dlaczego dwa znaczniki p nie są obok siebie, gdy ekran jest szeroki?

Gdy szerokość przeglądarki jest większa niż 1000px, kontener div.flex zmienia się, tak że znaczniki p mogą być obok siebie. Są jednak nadal ponad sobą.

Co mogę zrobić, aby umieścić je obok siebie na szerokich ekranach i nad sobą na bardziej wąskich ekranach?

(Przepraszam, zmieniłam tutaj pytanie. Chociaż naprawdę nie rozumiem, co się dzieje. W przypadku „flex-direction: column” p-tagi są zawsze nad sobą. Bez nich są one obok siebie nawzajem).

<!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>