Justifying content is failing to perform its duty, while aligning items is successfully fulfilling its role

Question

Justifying content is failing to perform its duty, while aligning items is successfully fulfilling its role

Can someone explain why the align-items property in this code is centering child elements on the x-axis instead of the y-axis? Also, the justify-content: center doesn't seem to have any effect. Even when I remove justify-content, the items are still aligned on the x-axis due to align-items property:

/* HTML: */

<div class="page">
    <div class="navbar">
      <div class="leftSide">
        <img src="./assets/images/logo.png">
      </div>
      <div class="rightSide">
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">What's New</a></li>
        <li><a href="#">Contact Us</a></li>
      </div>
    </div>

    <div class="content">
      <h1>It's not just Coffee</h1>
      <h1>It's <span>Starbucks</span></h1>
    </div>
  </div>

/* CSS: */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.page {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  position: sticky;
  top: 0;
}

.rightSide {
  display: flex;
  list-style: none;
}

.rightSide li{
  margin-right: 30px;
}

.rightSide li a {
  text-decoration: none;
  color: black;
  position: relative;
  transition: all 0.5s;
}

.rightSide li a::before {
  content: '';
  width: 0%;
}

.rightSide li a:hover::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  bottom: 0;
  left: 0;
}

.leftSide img {
  width: 80px;
  height: 80px;
  margin-left: 15px;
}

I've tried various solutions and searched extensively, but so far, I couldn't find a way to correct it. This isn't the first time facing this issue.

html css flexbox alignment vertical-alignment

Answer 1

Answer №1

These two issues are not directly intertwined.

The initial problem lies in your misunderstanding of how Flexbox operates. I strongly advise you to delve into the first three sections of "A Complete Guide to Flexbox" by Chris Coyier. Particularly, the "Background" section is where your misconception stems from.

To quote Chris Coyier:

Main axis – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).

This implies that the main axis aligns with the flex direction. Hence, justify-content pertains to the main-axis and align-items relates to the cross-axis. These properties do not explicitly target the Y-axis or X-axis!

By default, when flex-direction is set to row, the items align horizontally along the main axis:

body {
  margin: 0;
}

.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; 
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Changing flex-direction to column switches the main axis to be vertical (Y-axis), consequently aligning items along the Y-axis using justify-content:

body {
  margin: 0;
}

.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

The second issue involves a pure logical discrepancy that might not be immediately noticeable. By default, an element's height is set to auto, meaning the browser adjusts the height to fit the content precisely. In this snippet, you can see that the element (marked with a blue border) perfectly fits its parent (indicated by a red border):

body {
  margin: 0;
}

.flex-container {
  display: flex;
  align-items: center; 
  border: 2px dotted red;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
</div>

Logically speaking, to visually center an element, the parent element must have a greater height than the element itself. You cannot center an element within a tightly fitting container. If you increase the container's height to exceed the content's height, you'll observe that centering functions correctly:

body {
  margin: 0;
}

.flex-container {
  display: flex;
  align-items: center; 
  border: 2px dotted red;
  height: 80vh;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
</div>

Answer 2

These two issues are not directly intertwined.

The initial problem lies in your misunderstanding of how Flexbox operates. I strongly advise you to delve into the first three sections of "A Complete Guide to Flexbox" by Chris Coyier. Particularly, the "Background" section is where your misconception stems from.

To quote Chris Coyier:

Main axis – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).

This implies that the main axis aligns with the flex direction. Hence, justify-content pertains to the main-axis and align-items relates to the cross-axis. These properties do not explicitly target the Y-axis or X-axis!

By default, when flex-direction is set to row, the items align horizontally along the main axis:

body {
  margin: 0;
}

.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; 
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Changing flex-direction to column switches the main axis to be vertical (Y-axis), consequently aligning items along the Y-axis using justify-content:

body {
  margin: 0;
}

.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

The second issue involves a pure logical discrepancy that might not be immediately noticeable. By default, an element's height is set to auto, meaning the browser adjusts the height to fit the content precisely. In this snippet, you can see that the element (marked with a blue border) perfectly fits its parent (indicated by a red border):

body {
  margin: 0;
}

.flex-container {
  display: flex;
  align-items: center; 
  border: 2px dotted red;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
</div>

Logically speaking, to visually center an element, the parent element must have a greater height than the element itself. You cannot center an element within a tightly fitting container. If you increase the container's height to exceed the content's height, you'll observe that centering functions correctly:

body {
  margin: 0;
}

.flex-container {
  display: flex;
  align-items: center; 
  border: 2px dotted red;
  height: 80vh;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
</div>

Justifying content is failing to perform its duty, while aligning items is successfully fulfilling its role

Answer №1

Similar questions

Needing to scroll within a dropdown menu has become a necessity for me

Can an animation be created that transforms an SVG line into a flawless circle?

Eliminating the background color upon clicking

Press the button to reveal the table - jQuery/JavaScript

The hover selector in Material UI and React is not functioning as expected

Aligning text in the middle of an image both vertically and horizontally

How do I dynamically adjust class names for menu items as I scroll using jQuery?

Every file downloaded through the iframe is automatically stored in a designated server folder

Strategies for delivering CSS exclusively to up-to-date browsers

What is causing the radio button's background color not to change after it is selected?

The art of applying styles through styled components

Elements that are hidden or not displayed are still able to receive mouse over events

Arranging text in alignment on a single line with Vuetify

Displaying images on hover that were not initially incorporated into the project

Undoing alterations to the user interface in Angular 2 after discontinuing bi-directional data binding

HTML5 elements for displaying search results

What's causing Angular to not display my CSS properly?

Stylish CSS: Jagged 3-dimensional rotated text

<p> The box is massive, and its size is a mystery to me

Troubleshooting problem with displaying HTML content on Internet Explorer 10