Containing Elements: Tools for Proper Alignment

by 10 Best Design

Web designers are bound to run into situations when some elements will fail to align within containers. Let's say you have a container in which you throw in a paragraph along with some images and assorted lines of text; you try to set up a margin that automatically centers the paragraph but everything else stays to the left by default. When this happens, you can resolve it by setting a numeric pixel value to the width, but you can also call up Flexbox to the rescue.

Flexbox is a great tool for laying out elements in a container without worrying about where they go. It allows you to specify where the container's height and width will be applied on a parent container. And if that's not enough, you can take advantage of align-self, a property that enables you to use Flexbox to position elements to specific places inside the container. With that, you can create a neat container with no wasted space and put any padding or margins you need around it without having to tweak the size of your container. In this tutorial, you'll learn how to use Flexbox to center a container as well as how to position specific children using the align-self property.

Let's begin by laying out a page that displays a few elements; in this case, it's a simple container with a title and a paragraph

display:

flex-direction:

align-items:

justify-content:

To learn how to lay out this page with CSS Flexbox, start by creating the container (.flexbox-container), which will act as our parent container for all of our items. It has a default width of 100% of the screen and a default height of 100%. To add the center property, you have to first find the space available for your element to align itself. That's what the center property does—it finds the amount of space that is available in a container. After that, you'll see how to use the align-self property to position a container and its contents in the middle of the space. The align-self property's values are left, center, and right. For more information click here https://www.reddit.com/r/webdesign/comments/prqpyb/thismaxwidthisgivingmehell/.