I have encountered various scenarios where I need a DIV to contain an inline-block menu element - usually an anchor - and behave as if the elements are vertically justified, even when they overflow onto multiple lines.
Let me illustrate with an example:
Here is my codepen: http://codepen.io/anon/pen/wBRpqJ?editors=110
Output:
When the browser window is resized to a smaller size, the final inline-block Anchor element moves to a new line, as shown in the screenshot (at around 725px width):
Output:
This behavior is acceptable, but what I would like to achieve is to evenly distribute the elements within the DIV across two lines when it exceeds one line, making it appear roughly justified. If you resize the codepen to about 500px wide, you will see how I envision it looking if the elements cannot fit on one line. The image below demonstrates what I aim for in case any line breaking happens within the parent DIV element.
Output:
I understand that achieving perfect equality may not always be possible due to dynamic content and different situations. Still, I aim to justify the elements in such a way that each row in the block accommodates a similar number of elements, give or take 1 for odd counts.
Is this achievable using CSS?
P.S> Since the contents and contexts where this solution might apply vary, specific solutions tailored only to this particular case might not suffice.
Edit: Flexbox has been suggested as a solution; how can Flexbox help achieve the desired outcome?
Edit 2: Criteria -- The menu elements are center-aligned and are individual inline blocks. By trying to justify them all, the center alignment gets disturbed, and additional spacer lines surround the Anchor elements inside the NAV container.
Edit 3: I will include the code used in the codepen example:
CSS:
.mainbox {
width:90%;
max-width:1200px;
min-width:400px;
margin:0.4em auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
border: 1px solid #006;
}
nav {
background-color: rgba(204,204,204,0.4);
padding:5px 5px 0px 5px;
text-align:center;
position: absolute;
/* bottom increased from zero to make example clearer on codepen */
bottom:1em;
margin:auto;
width:90%;
/* width adjusted from 100% for codepen layout */
}
nav a {
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
padding:2px 4px;
color: #000;
border: 1px solid #000;
line-height: 1.1em;
background-color: #DDDDDD;
margin:0 3px 3px 3px;
display:inline-block;
}
nav a:hover, nav a:focus {
background-color: #FFFFFF;
color:#000000;
text-decoration: none;
}
HTML:
<div class="mainbox">
<header>
<nav>
<a href="#cal" title="Cottage Availbility">Availability</a>
<a href="#tariff" title="Tariff">Tariff</a>
<a href="#" title="Make A Booking ">Make A Booking</a>
<a href="http://www.website.com/AccessStatement.pdf" title="Access Statement" target="_blank">Access Statement</a>
<a href="http://www.website.com/TandCs.pdf" title="T&Cs" target="_blank">T&Cs</a>
<a href="#contact" title="Contact the owners">Contact</a>
<a href="http://www.elsewhere.co.uk" title="Visit the website">
Parent Site</a>
</nav>
</header>
</div>