How to Align an Element to Bottom with Flexbox in CSS? Last Updated : 15 Nov, 2024 Comments Improve Suggest changes Like Article Like Report Here are different ways to align an element to bottom with Flexbox in CSS.1. Using align-self PropertyWe can use the align-self: flex-end; property, which aligns the baseline of the flex item with the baseline of the last line of text in the flex container. This can be useful in cases where there are multiple lines of text in the container and you want to align a particular flex item with the bottommost line of text.Syntaxalign-self: flex-end; HTML <h3>Align an element to bottom with flexbox</h3> <div style="width: 300px; height: 250px; padding: 0.5rem; border: 2px solid black; display: flex;"> <p style="align-self: flex-end; width: 300px; height: auto; padding: 0.5rem; border: 2px solid black;"> <b>Paragraph Element.</b> <br> A one-stop solution for CS/IT students to learn Programming Concepts, Data Structures & Algorithms, Coding Practice, etc </p> </div> OutputUsing align-selfIf we have multiple items inside a flexbox we can align the items to the bottom using flexbox in CSS:2. Using flex-direction We wrap all the elements in a div element except the last one and apply the justify-content property to align the items to bottom.Syntaxflex-direction: column;justify-content: space between; HTML <h3>Align an element to bottom with flexbox</h3> <div style="width: 315px; height: 400px; padding: 0.5rem; border: 2px solid black; display: flex; flex-direction: column; justify-content: space-between;"> <div> <p style="height: 40px; padding: 0.5rem; border: 2px solid black;"> <b>Paragraph Element 1.</b> </p> <p style="height: 40px; padding: 0.5rem; border: 2px solid black;"> <b>Paragraph Element 2.</b> </p> </div> <p style="height: 40px; padding: 0.5rem; border: 2px solid black;"> <b>Paragraph Element 3.</b> <br> Element align at bottom. </p> </div> OutputUsing flex-direction3. Using align-items propertyWe use the align-items: flex-end; property to align elements at the bottom of the div.Syntaxalign-items: flex-end; HTML <h3>Align an element to bottom with flexbox</h3> <div style="width: 315px; height: 300px; padding: 0.5rem; border: 2px solid black; display: flex; align-items: flex-end;"> <p style="height: 100px; padding: 0.5rem; margin: 0.1rem; border: 2px solid black;"> <b>Paragraph Element 1.</b><br> Element align at bottom. </p> <p style="height: 100px; padding: 0.5rem; margin: 0.1rem; border: 2px solid black;"> <b>Paragraph Element 2.</b><br> Element align at bottom. </p> <p style="height: 100px; padding: 0.5rem; margin: 0.1rem; border: 2px solid black;"> <b>Paragraph Element 3.</b><br> Element align at bottom. </p> </div> OutputUsing align-items Comment More infoAdvertise with us Next Article How to Align an Element to Bottom with Flexbox in CSS? harishcarpenter Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How to Float an Element to the Bottom Corner in CSS ? The float property can be used along with align-items to float an element to the bottom corner. The float property is used for formatting purposes it can be used to shift the element to the left or right side of its container and all the inline elements such as text will wrap around it. The align-it 4 min read How to Specify an Element After which to Wrap in CSS Flexbox? Flexbox is a powerful CSS layout tool that helps create flexible and responsive designs easily. One of its features is the ability to control the wrapping of items within a flex container. In this article, we are going to learn how to specify an element after which the wrapping should occur in a CSS 3 min read How to Centre a Button with Flexbox? Flexbox can be used to align HTML elements with ease, making it a powerful tool for responsive design. By utilizing Flexbox properties, you can centre a button both horizontally and vertically within its container, or adjust its alignment to achieve specific layouts. These are the following ways to 2 min read How to Align Form Elements to Center using Tailwind CSS? Form elements are parts of a webpage that let users enter information. They include things like text boxes, checkboxes, radio buttons, dropdown menus, and buttons. To center form elements using Tailwind CSS, use classes like flex, items-center, and justify-center on a parent container.These are the 2 min read How to Fixed an Element to Center in Tailwind CSS? Here are two different methods to center an elementwith Tailwind CSS.1. Using mx-auto ClassWe can use the 'mx-auto' utility class to center an element horizontally. The "mx-auto" class centers an element horizontally within its parent container by setting the left and right margins of the element to 2 min read How to Create a Navigation Bar with CSS Flexbox? The navigation bar is a crucial aspect of modern web design. We can create a responsive navigation bar using CSS Flexbox, which provides a flexible and efficient way to layout elements, making it an excellent choice for creating navigation bars. Below are different possible ways for creating differe 5 min read How to Disable Equal Width Columns in CSS Flexbox? With CSS Flexbox, developers can easily create complex and responsive layouts due to its powerful layout module. Its capacity to create equal-height columns inside flex containers is one of its features. There are situations, though, in which you might want to turn this behavior off and allow the he 2 min read How to Align Items and Space with Flex in Tailwind CSS? Flex allows you to structure the elements in a container with precise control over alignment and spacing. Tailwind CSS provides utility classes to use Flexbox for aligning items and distributing space between them. By using classes like justify-between and justify-around, you can easily create layou 3 min read How to Right Align Div Elements in CSS? In CSS, to right-align <div> elements, there are multiple methods available that can be used. Each method serves a different purpose, making it easy to choose the best one depending on your needs. 1. Using Float PropertyThe float property in CSS is used to right-align a <div> by applying 3 min read How to align item to the flex-end in the container using CSS ? Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items 3 min read Like