Tag: Flexbox

Vertically Centering Text, With Flexbox

Vertically Centering Text

A very common challenge for website designers is creating effective vertical alignment with text, especially with responsive website design. In the past, before Flexbox was around, you’d have to use tables or clever absolute positioning, both of which weren’t very good solutions.

Flexbox

Nowadays however, vertically aligning text is quite simple, thanks to Flexbox. If you have never worked with Flexbox before, it’s simpler than you think. Definitely check out my Flexbox tutorial and get up to speed quick.

Vertically Aligning Text

HTML

Let’s first start out by creating the basic HTML tags we’ll need. Be sure to include a container for the title, as we will need to utilize that with Flexbox and absolute positioning.

<div class="box">
  
  <img src="https://placehold.it/500x500">
  
  <div class="title">
    <h1>Title</h1>    
  </div>  
  
</div>

CSS

Now that we have all the required HTML tags, we can begin integrating Flexbox styling.

* img{
  max-width:100%;
  height:auto;
}

img{
  display:block;
}

.box{
  background:blue;
  max-width:500px;
  text-align:center;  
  position:relative;
}

.title{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  
  display:flex;
  flex-direction:column;
  justify-content:center;
}

Live Example

See the Pen Vertically Centered Text with Flexbox by Richard (@barkins) on CodePen.

Wrap Up

Just keep in mind how Flexbox works with the parent child relationship. With that understanding, you’ll be able to easily create dynamic layouts, especially for responsive websites.

Filed under: CSS3Tagged with:

Flexbox Responsive Dropdown Menu, No JavaScript

With Flexbox, it’s relatively simple to quickly create a fully responsive menu without JavaScript. This example includes a one level drop down menu as well.

See the Pen Flexbox Menu by Richard (@barkins) on CodePen.

Step 1: HTML

Here’s a the simple HTML code with an unordered list. Although this can be done without using a UL, it’s more effective to use it when you have a dropdown menu. Otherwise, it’s safe to omit it.

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="sub-menu"><a href="#">About</a>
      
      <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Bio</a></li>
      </ul>
    
    </li>    
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav><!--/menu-->

I tried to omit any unnecessary custom classes, however I did need to include one with the drop down LI tag.

Step 2: CSS

Here’s where the Flexbox action comes into play. Start by selecting the UL and add display:flex to it.

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

In order to have the menu take the full space of its container, I needed to include a width:25% on the LIs. Initially I wanted to use flex-grow:1 instead, however I ran into some wonky width issues when hovering over the dropdown menu. Just be sure to change the percentage width based on how many top level menu items you have.

.menu ul li {
  width: 25%;
}

For the dropdown menu, you’ll first want to hide that UL inside the LI tag.

.menu ul li > ul {
  display: none;
  flex-direction: column;
}

Then when hovering over the LI menu item with a dropdown inside of it, apply display:flex to it.

.menu ul li:hover > ul {
  display: flex;
}

Step 3: Complete CSS

Here’s all the CSS for your reference.

.menu {
  font-family: sans-serif;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.menu ul li {
  width: 25%;
}
@media (max-width: 40em) {
  .menu ul li {
    width: 100%;
  }
}
.menu ul li > ul {
  display: none;
  flex-direction: column;
}
.menu ul li > ul li {
  width: 100%;
}
.menu ul li:hover > ul {
  display: flex;
}
.menu a {
  text-transform: uppercase;
  display: block;
  background: blue;
  padding: 15px;
  color: white;
  text-decoration: none;
  text-align: center;
}
.menu a:hover {
  background: lightBlue;
  color: blue;
}
.menu .sub-menu li > a {
  background: lightBlue;
  color: blue;
}
.menu .sub-menu > a:after {
  content: "+";
  padding-left: 5px;
}
Filed under: CSS3, HTML5Tagged with: