Distinguishing features of horizontal and vertical flexboxes in CSS

My current approach involves using display: flex to center an item within its container. I've found success by utilizing the justify-content and align-items properties (method 1).

While exploring the flexbox documentation, I noticed that most concepts have both horizontal and vertical variations. However, when attempting to center items by swapping the axes on everything (method 2), it doesn't quite yield the desired outcome. What is causing this discrepancy?

<table>
<tr>
  <th>METHOD1</th>
  <th>METHOD2</th>
</tr>
<tr>
  <td><div class="outer center-method-1"><div class="inner"></div></td>
  <td><div class="outer center-method-2"><div class="inner"></div></td>
</tr>
</table>

<style>

  table {
    border-spacing: 10px;
  }

  .outer {
    background-color: #ddd;
    width:  100px;
    height: 100px;
  }

  .inner {
    background-color: #f00;
    width:   20px;
    height:  20px;
  }

  .center-method-1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .center-method-2 {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-items: center;
  }

</style>

Answer №1

Your code has multiple issues that need to be addressed...

  1. Remember, the div tag is not self-closing like meta. Make sure to close it properly as

    <div class="inner"></div>
    instead of <div class=inner />.

  2. Always enclose classes and IDs in quotes. Incorrect syntax would look like class=inner.

  3. In flexbox layouts, the justify-items property will be ignored. Check out this link for more information: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

  4. The align-content property does not affect single-line flexbox layouts. Learn more here: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

  5. To properly center a child within a flexbox container, ensure you understand how justify-content, justify-items, align-content, and align-items work. It seems there may be confusion in your center-method-1 and center-method-2 properties.

If your aim is to centrally position the child within the flexbox container regardless of the main axis, consider implementing the following approach:

.outer {
    background-color: #ddd;
    width:  100px;
    height: 100px;
}

.inner {
    background-color: #f00;
    width:   20px;
    height:  20px;
}

.center-method-1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.center-method-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
<div class="outer center-method-1">
    <div class="inner"></div>
</div>

<br><br><br><br>

<div class="outer center-method-2">
    <div class="inner"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to use Bootstrap 5.1.3 to make the image fill the height of the card's body and footer, while also ensuring the card-footer is placed at the bottom of the card? The desired outcome: <link rel="stylesheet" href="https://cdn.jsdeli ...

Using Jquery to duplicate a row from one table and insert it into another table

Recently, I've dived into the world of jQuery and JavaScript with the goal of creating a simple app. The main functionality I'm trying to implement is the ability to copy a row from one table to another and then delete the original row when a but ...

Tips for changing the id of a data-target dynamically?

I am faced with a challenge involving three divs that have different IDs. I want to combine the myModal + i values and assign them to the data-target attribute, but I am uncertain about the correct approach. Here is the snippet of code I am working with ...

The html input box's ability to handle overflow situations

Currently, I am working on creating a form that allows users to update data. <dl> <dt>Medical Needs:</dt> <dd class="med_needs" style="height:60px;overflow:auto"> <input type = "text" id="med_needs"name ="med_nee ...

Tips for updating comments using ajax technology

I need to implement AJAX in order to update the page automatically whenever a new comment is added, eliminating the need to manually refresh the page. I have attempted to achieve this by adding a section of code but it's not working as expected. Even ...

Troubleshooting navigation problems in AngularJS Bootstrap Navbar

Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...

Building a personalized payment experience using Python Flask and Stripe Checkout

I'm attempting to set up a customized checkout integration with Stripe on my Flask web application and I've encountered some issues. After copying the code from the Stripe documentation (located at https://stripe.com/docs/checkout#integration-cu ...

An engaging webpage with a dynamic scroll feature

I recently inherited a dynamic HTML page that utilizes bootstrap and jqxGrid, and it calls server side code to retrieve data. However, after the data is loaded and the jqxGrid is populated, the page automatically scrolls down. Since I got the code from a ...

Include a picture and a division element within the dropdown element

I've encountered a few challenges while trying to personalize a profile dropdown component using Semantic and React. First, I am facing an issue where my application crashes when I attempt to place a div inside the Dropdown.Menu with the error message ...

Creating a dynamic layout of 9 divs in a fluid 3x3 grid

Fiddle | FullScreen UPDATE : New Fiddle | FullScreen View The code snippet provided demonstrates the creation of a grid with dimensions of 3x3, consisting of 9 div elements (with 8 cloned using jQuery). The horizontal alignment of the grid has been ac ...

Unable to define an object within the *ngFor loop in Angular

In order to iterate through custom controls, I am using the following code. These controls require certain information such as index and position in the structure, so I am passing a config object to keep everything organized. <div *ngFor="let thing of ...

What are the best ways to position elements within a material-ui App Bar?

My goal is to align the items in my navbar similar to this layout (replacing 'Buy on App Store' with a Search Box): https://i.sstatic.net/4NOhU.png I'm drawing inspiration from this material-ui component: https://material-ui.com/components ...

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

There is a restriction on using new to create an instance of Template, which extends an HTMLTemplateElement. To work around this limitation, I fetch and return an HTMLTemplateElement by using document.getElementById(id) within the constructor of the Templ ...

jQuery - Modify Turn.js to exclusively implement the page Peel effect

I am attempting to implement the peel effect from turn.js into my code, where hovering over the bottom right corner of the page causes it to peel slightly and appear as if it is bending upwards. I specifically want only the peel effect and not the entire ...

Issues arise when attempting to manipulate the DOM with ng-view in AngularJS

Apologies for not providing the code due to its length. I have a simple application with a single module, controller, and ng-view/routProvider. In my controller, when I use console.log(angular.element('div').length), it correctly shows that ther ...

The size of the search input and textarea in HTML decreases when viewed on an iPad device

Currently utilizing Bootstrap 3 and AngularJs for this project. Implementing the following markup for the input field with type 'search': <input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model=&apo ...

Add or remove a class when a button is clicked

I am trying to achieve the functionality where upon clicking a button, one class is removed from a div and another is added. However, I have been unsuccessful so far in making it work. <div class="hiddennav displaynone"> <ul> <?php wp ...

"Is there a way to implement a sequence of fadeIn() followed by fadeOut() and then insertAfter

I have created a simple div fade cycle. Some of the divs are within an outer div, which is then placed in another outer div. I've written a script that cycles through these divs by fading them in and out. However, there seems to be a problem - the div ...

Having trouble setting up a twitter widget?

I have developed a custom jQuery plugin that displays a sidebar on the left for social media content. The variable below contains the source of the content. I am currently facing an issue while trying to integrate a Twitter feed using the widget, as it kee ...

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...