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 my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

css

Ways to change the CSS styling of the placeholder attribute within a textarea or input field tag

I am currently working on adjusting the font size of the text within the placeholder attribute of a textarea element. While I have been successful in achieving this using vanilla CSS, I have encountered difficulties when trying to implement the same concep ...

cssangularangular-material2

Is there a way to set the size of my unique carousel design?

Having some trouble with my modal image carousel; the dimensions keep shifting for different image sizes. Image 1 Image 2 ...

htmlcssangularuser-interfacecarousel

Header and footer remain unaligned

Bookstore.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ul { list-style-type: none; padding: 20px; overflow: hidden; background-color: black; width:1230px; p ...

htmlcssjsp

Using jQuery, you can easily update the value of the nth-child(n) for a cloned element

Looking to duplicate an HTML element and assign new values to its child elements? Here's my current HTML structure: <div id="avator" class="avator" style="display:none"> <label><a href="/cdn-cgi/l/email-protection" class="__cf_email ...

htmljquerycss

Files are nowhere to be found when setting up an angular project

After creating an Angular project, I noticed that some key files were missing in the initial setup, such as app.modules.ts and app-routing.modules.ts The project was generated using the command ng new name Here is a screenshot displaying all the files th ...

htmlcssangulartypescript

The submenu is not aligned directly under its parent item

The sub-menu is not appearing below the parent item as expected. I have tried removing and adding the 'absolute' property, but it doesn't seem to have any effect. Check out the JS Fiddle for reference: http://jsfiddle.net/42qg5/ HTML Code ...

htmlcss

Center an image vertically and horizontally within a div element inside a container, even if the image sizes and aspect ratio differ, while also including padding

I am looking to vertically align images with varying ratios, where the image may be larger or smaller than the content and also include padding; I have tried different solutions found here, but none seem to cover all my requirements; I specifically need i ...

css

What causes the disappearance of CSS styles when attempting to modify the className in react js?

I am currently working on a basic react application, and I am trying to dynamically change the name of a div element using the following code snippet - <div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} ...

javascripthtmlcssreactjs

Divide the output results into two equal horizontal sections within the same HTML table

Is there a way to dynamically split the output of a specific result into two horizontal sections that fit within the browser width? The number of rows returned from the service is variable, so a fixed solution won't work. I also want to avoid manually ...

javascripthtmlcssangularjshtml-table

Mastering the art of flawlessly executing kerning-generated code

I am facing a problem while implementing logotext with kerning technique in the <header> element. I found a useful tool made by Mr. Andrew which can be accessed through this link. Before making any modifications, I had the following code in the heade ...

phphtmlcsswordpresskerning

The Zoom CSS property seems to be experiencing some issues on the Firefox browser

After researching the issue, I discovered several solutions involving css3 transition techniques. Currently, I have been using {zoom:1.5} for all of my buttons. However, this method does not work on Firefox. When attempting to implement the transition pro ...

htmlcss

Is it possible to use jQuery to search an unordered list by simply pressing a key on the keyboard?

I have a list of countries displayed as an unordered list inside a table column. I would like to implement keyboard search functionality for quicker navigation within the list. <ul class="country-search"> <li id="1">Country 1</li> ...

jqueryhtmljquery-uicss

Changing colors using JavaScript: A step-by-step guide

Hey there! I'm looking to change the color code in this script from $("#Tcounter").css("color","black") which uses the color word "black", to "#317D29". Can someone help me figure out how to do this? <script type="text/javascript"> $(document). ...

javascriptjquerycss

Fade-In Effect for CSS Background Image

I'm currently learning CSS and I am trying to create an effect where, on hover over some text, the text disappears and an image fades in. I have been experimenting with different methods but haven't quite achieved the desired outcome. The text i ...

htmlcsshover

What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

I'm working on coding a to-do app using JavaScript, HTML, and CSS. The issue I'm facing is that when I add the text-decoration: line-through property to the list items, it also affects the X icon used for deleting tasks. I suspect this problem ar ...

javascripthtmlcss

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

javascripthtmlcssgradient

Google Chrome has trouble displaying the body element at 100% height

Having an issue with Google Chrome – the body element is not reaching 100% height. In my website samples, at 100% zoom when hovering over a menu element (such as "O nás"), I change the background color of the body element. However, in Chrome, the botto ...

htmlcssgoogle-chromeheight

Decreasing the space between columns in Bootstrap 3

My objective is: However, the current layout appears like this (the issue isn't the bottom margins, I've already decided they should be smaller): The problem lies in the gutter size which is determined by padding, as indicated by the grey area ...

htmlcsstwitter-bootstrapgutter

How can I incorporate checkboxes and crosses for validation in AngularJS?

I've been searching through the documentation for angularjs and online resources, but I can't seem to find any information regarding a specific aspect of form validation. You know when you input something in a form field (like a name, phone numbe ...

cssangularjs