How to align all children at flex-start while positioning one child at the end?

I am currently working on a flex container that has 3 children. My goal is to have all the children align at flex-start, with the final child positioned at the bottom of the container.

Can align-content be combined with align-self to achieve this layout?

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 15px 15px 50px 15px;
    height: 100%;
    background: red;
    width: 200px;
    height: 500px;
}

.item-1,
.item-2,
.item-3 { width: 100%; }

.item-3 {
    align-self: flex-end;
}
<div class="container">
  <div class="item-1">One</div>
  <div class="item-2">Two</div>
  <div class="item-3">Three</div>
</div>

cssflexbox

Answer №1

To make your element 100% width, you can change the direction to column and adjust alignment with margins:

.container {
  display: flex;
  flex-direction: column;
  padding: 15px 15px 50px 15px;
  height: 100%;
  background: red;
  width: 200px;
  height: 300px;
}

.item-3 {
  margin-top: auto;
}
<div class="container">
  <div class="item-1">One</div>
  <div class="item-2">Two</div>
  <div class="item-3">Three</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

How come the last word in CSS nested flexbox wraps even though there is space available?

I am facing an issue with a nested flex container setup. Below is the code snippet: <div class="parent-container"> <div class="child-container"> <span class="color-block"></span> <span>T ...

htmlcssflexbox

ScrollSpy Plugin in JQuery - Implementing automatic vertical text scrolling with dynamic height customization

I have been using this code to display the most recent user comments on my website, where some comments are concise while others are more lengthy. If you inspect the source code, you will notice that the height is set to 90px and overflow is set to hidden ...

cssjquery-ui

What is the most effective way to toggle the visibility of these rows within a table?

Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on ...

jqueryhtmlcsshtml-tableshow-hide

What strategies can we implement to reduce the gutter width in Bootstrap 3?

Is there a way to decrease the gutter-width in Bootstrap 3? Since Bootstrap uses a 12-grids system, using col-sm-* creates a gap between elements of around 30px (15px on each side of the grid-column). However, my theme requires less space between columns ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Bringing in LESS variables to Rails 3

In my assets folder, I have a global.less file where I have defined various site-wide variables. Currently, in order to use these variables in other less files, I have to add this line at the beginning of each file: @import 'global'; While thi ...

cssruby-on-rails-3asset-pipelineless

Emphasizing the content of the text file with the inclusion of span tags

I am relatively new to working with angular js and javascript. I have a document or text file that looks something like this: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dumm ...

javascriptjqueryhtmlcssangularjs

Techniques for ensuring input validity using JavaScript

One of my form inputs is required: <input type="text" id="input-id" required> After the user submits it, I send the value using ajax and then clear it with $("#input-id").val(""). However, after this action, the input appears invalid. I want to ...

javascripthtmlcssfrontendrequired

The text-decoration is here to stay

Currently, I am facing an issue with the customization of a wordpress theme related to the styling of links within posts. Although I have tried to change the color and remove underlining using CSS rules, I am unsuccessful so far: a, .entry-meta a, entry-c ...

htmlcsswordpresshyperlinktext-decorations

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Having some trouble with the layout of a website, particularly in IE. The issue can be observed at . When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. I ...

htmlcsscross-browserinternet-explorer-9css-selectors

The div "tags" cannot be positioned beneath the photo as it is automatically located alongside the image inside the div

Is there a way to place the "Tags" div beneath an image, creating a bar of tags below it? I've been struggling to position it properly without disrupting the flow of the page. Using absolute positioning is not an option as it would break the layout. A ...

css

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

htmlcss

No need for jQuery with this scrolling image gallery

I recently created a horizontal scrolling image gallery with thumbnails underneath. The goal is to click on a thumbnail and have the corresponding image scroll into view. Here's the HTML setup: <div class="images_container"> <img id="imag ...

javascripthtmlcssimage

Navigating from Page 1 to Page 2 and then returning to Page 1 using the browser's back button causes Page 1 to malfunction in NextJS version 13

I am currently using next version 13.4.5 and implementing routing with typescript through /app. On my first page, I have a <Link> (next/link) element that takes me to Page 2. However, when I use the browser back button to return to page 1, the layou ...

htmlcssreactjsnext.jsserver-side-rendering

Ways to connect css file to ejs views in nodejs

Currently, I am tackling a beginner node.js server project. While I have successfully managed to render dynamic HTML using ejs templates, I seem to be facing difficulties when it comes to linking CSS styling to these templates. In an effort to address thi ...

cssnode.jsexpressejs

What could be causing the styled-component's flex value to not update?

I have a sidebar and main content on my website layout. The main content occupies most of the screen space, while the sidebar should only take up a small portion. Both elements are within a flexbox container, with the sidebar and main content as child divs ...

cssreactjstypescriptflexboxstyled-components

Implementing a sticky header for tables using Bootstrap

I'm experiencing a conflict because the header remains fixed only when I include the table-responsive class in my code. However, I also need the table to have overflow. Can anyone provide assistance with this issue? Using the table-responsive class ...

htmlcsstwitter-bootstrapbootstrap-5sticky

defined dimension of table cell

<table class="data-table"> <tr> <th style="width: 200px;"> DescriptionDescription <%--in this case <td> is resized--%> </th> </tr> <% foreach (var item in Model) { %> ...

htmlasp.net-mvccss

Change all instances of the asterisk character to a red color on every page using CSS styling

Is it possible to change the color of the asterisk that indicates required fields on all forms across my site without having to wrap it in a div or another wrapper? ...

cssvalidationrequired

utilizing jquery for dynamic color changes

Check out the code snippet below, which involves the bootstrap accordion and showcases certain elements within the title section. <dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Manage</span>& ...

jquerycsscolorsaccordion

Adjusting the iframe for a side navigation with multiple dropdown options

I have a file called index.html that contains two dropdown containers and an iframe. The first dropdown container works with the iframe, but the second one does not. Can anyone help me fix this issue? I am having trouble understanding the script for chang ...

javascriptjqueryhtmlcssbootstrap-4