Design Drops

This was required for a project I am working on, and the solution I found turned out to be pretty simple. It just required creating a variable for each of the form input fields, “lowEnd” and “highEnd” and then creating a loop that ads one to the low end number until it get’s as high as the high end.

This is a very simple flex layout based on some examples from a recent smashingmagazine article.

This example was used to show how “flex” fails to created a true grid, because the lower blocks will not always line up with the blocks above. Having said that, there are settings that will allow the over flow to align with the boxes above, but will leave empty space if the number of items in each row are not equal.

The first example will keep each item aligned with the item above, but may leave the last row with an empty space. The important line of code is in the class controlling the item (inside the row) – in this case, line 16:

On the other hand, you can let the uneven items on the last row stretch to fill the space, which is quite handy in some situations.

Again, line 16 is the key:

Notice that I have changed the first 0 to a 1. This first value toggles between “initial” and “auto”. For more details on that check out W3Schools

The problem: You have two or three (or more) boxes in a row, each containing text above a button. Because each block of text is a slightly different length, depending on the screen width, the buttons are not always aligned.

The simple solution is to use Flexbox, but the problem is that the exact solution is not always so easy to find.

This is a bare bones solution. It requires three css classes.

1. The Container
2. The element (or box)
3. The button, which sits inside the box.

The container needs to contain: display: flex;.
This will make all the DIVs inside the sontainer stretch to the size of the container.

The Box needs to contain:
display: flex;
flex-flow: column nowrap;
This will stop the elements from within the box forming their own columns. For example, without this, the H2 and P tagsn will sit side by side.

And to get the button to sit at the bottom you use this: margin-top. : auto;