Geek Answers Handbook

Why not align-center my sections?

I am trying to center two divs inside a dad div horizontally.

The daddy div is set to flex-direction: column , since I want the child div to be under another, but in the center of the page.

justify-content: center; should do it but not work.

I finally did work with align-self , but any explanation why this large amount of code is not enough to center the div inside?

Here is my code:

 <div class="main"> <div class="child-1">HI</div> <div class="child-2">WE BUILD AWESOME STUFF</div> </div> .main { display: flex; flex-direction: column; justify-content: center; }
+6
source share
1 answer

Main and transverse axis

Consider the main axis and the transverse axis of the flexible container:

enter image description here Source: W3C

In the image above, the main axis is horizontal, and the transverse axis is vertical. These are the default routes for the flex container.

However, these directions can easily be switched using the flex-direction property.

 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse;

(The transverse axis is always perpendicular to the main axis.)

property justify-content (works only on the main axis)

The justify-content property aligns flex items along the main axis of the flex container.

In other words, when your container is flex-direction: row , this makes the main axis horizontal. justify-content: center will work as you expect.

But you set the container to flex-direction: column . This means that the main axis is now vertical, and justify-content will position the bending elements up / down rather than left / right.

Since you do not have excess height in your example, you will not notice anything else; justify-content has no place to work. (Unlike the widths that block default elements at 100%, heights must be specified. Otherwise, the elements default to auto - the content height.) But give the container some height and see what happens.

align- * properties (work only with the transverse axis)

The align-self , align-items and align-content properties work on the transverse axis of the flexible container (again, always perpendicular to the main axis).

Since your main axis is vertical, the align-* properties will align the elements left / right. This is why align-self worked to center your divs.

Short summary: depending on the flex-direction , the main axis and the transverse axis, taking along its assigned properties.

Decision

If your goal is minimal code, here is all you need:

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

More: In CSS Flexbox, why are there no “justify-items” and “justify-self" properties?

+6
source

More articles:


All Articles