Databases
StackOverflow2013
Postsdbo
PONavigation with balanced CSS flex-wrap containers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONavigation with balanced CSS flex-wrap containers
    primarykey
    data
    text
    <p>I really love the new CSS flexbox design possibilities. Especially <code>flex-wrap: wrap</code> can be a powerful tool to save some space (e.g. simple mobile navigation design pattern).</p> <p><strong>My Situation</strong>: I have this navigation, on desktops all items are lined in one line. With <code>flex:auto</code> the items fill up all the space. Now, when i resize the browser, at a certain point, when there is no more space left, flex-wrap automagically creates this second line for me.</p> <p>See my small <a href="http://codepen.io/esher/pen/JiLms" rel="nofollow noreferrer">DEMO</a> or have a look at this picture:</p> <p><img src="https://i.stack.imgur.com/gXW0o.png" alt="enter image description here"></p> <p><strong>This is what tickles me</strong>: Only the first item is in the second row (when the first wrap happened). That's not really balanced and gives a lot of attention on this item. What i want is to distribute them equally. Is there a <strong>CSS-only</strong> no-hacks-included way that i am missing here?</p> <p>EDIT: I do this layout for a dynamic web app. This navigation should fit different views and situations. So i don't want to care how many items there are going to be. The markup should ideally be a simple <code>ul li</code> list (no extra rows, no extra classes). So i am really looking for some kind of CSS parameter magic.</p> <p>EDIT2: For better understanding: <code>text-wrap: balance</code> is a proposal to do basically the same only with chunks of pure text for typography.</p> <p>EDIT3: See Bootstrap CSS framework grid model for example. Here you various columns-widths. You need to define how much space a column takes (third, quarter), for each device-width, for example: This colums takes a quarter of the width on a desktop, but only half of the width on a phone. wouldn't it be much cooler when browser could justify that?</p> <p>EDIT4: Think of CSS-columns, here the content spans across the columns, but the content direction is only possible in N-form (column by column), imagine the same in Z-form (line by line).</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USFrank Lämmer
    1. USFrank Lämmer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PONavigation with balanced CSS flex-wrap containers
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PONavigation with balanced CSS flex-wrap containers
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PONavigation with balanced CSS flex-wrap containers
      1. USvals
      1. VTFavorite
    1. COI did some more research. Seems to me that there is no elegant solution.
      singulars
      1. PONavigation with balanced CSS flex-wrap containers
      1. USFrank Lämmer
    2. COI've lost the sense of your question after edit. If you want plain markup - enjoy default multi-line algorithm. If you want custom behaviour - adjust markup accordingly.
      singulars
      1. PONavigation with balanced CSS flex-wrap containers
      1. USPavlo
    3. COI don't think that what you want can be achieved, but I would like very much to be proved wrong.
      singulars
      1. PONavigation with balanced CSS flex-wrap containers
      1. USvals
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload