Using A Flex Item As A Flex Container

I wanted to use flexbox with a column layout, but I wanted the top n - 1 flex items to be pinned to the top and the nth flex item to be pinned to the bottom of the main flex contai

Solution 1:

The spec isn't very clear on this, but it states that "Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item." This seems to imply that if I put a flex container inside another flex container that the inner flex container would also implicitly become a flex item for its containing flex container even if this is not explicitly defined. Example 1 of the specification shows a flex container within a flex container and assuming it is legal syntax it follows that my use case may also be legal, but the section with example 1 is marked as non-normative... (╯°□°）╯︵ ┻━┻... At this point I'm just going to assume this is correct.

Solution 2:

It's hard to say that your use of flex-end is wrong because you're getting the desired effect, but there's an easier way to do it.

Try using:

.flex-container{
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}

justify-content: space-between; forces your flex items to spread out as much as possible in the flex container.

This is the reference guide I use whenever doing anything with flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Solution 3:

You can also try this this will make your last item to stick to bottom of your parent container

.flex-container{
    position:relative;
   }
 .flex-item-bottom{
    position:absolute;
    bottom:0;
 }