CODEWITHSUNDEEP
htmlcssreactjsflexbox
Joe
Joe

Reputation: 85

Vertically Aligning Flexbox Items Correctly

I am working on creating a footer for my app where there are 3 main components. The current footer container is:

.footer-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: $bar-color;

Each child element has

display: inline-block

And it produces the vertical alignment that I am looking for:

enter image description here

However, I am looking to center the 3 components equally across the footer. The flexbox space-between option looked like it would fit best, therefore I tried it. In terms of horizontal alignment, it is perfect, however when I add

display: flex;
align-items: center;

to the footer-container class it moves the first item down. Like this: enter image description here

I'm not sure why this is occurring. How would I fix it?

Upvotes: 0

Views: 60

Answers (1)

Tanner Dolby
Tanner Dolby

Reputation: 4421

A flexbox has two main axes. You are aligning items along one axis of the flex container with align-items, but you also need to include the justify-content property for aligning along the other main axis of the flex container. That is why you see the uneven row.

When you specify both axes of the container with CSS properties justify-content and align-items, using space-between works as expected. Flexbox docs

html, body {
  margin: 0;
  padding: 0;
  background: #111;
}

:root {
  --footer-color: #000;
}

.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--footer-color);
}

.footer-container p {
  display: inline-block;
  color: #FFF;
}
<html>
  <body>
    <div class="footer-container">
      <p>Connected</p>
      <p>12:00:59 AM</p>
      <p>Version 0.0.1 (Latest Version)</p>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions