Using flex as 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 area of the flex container.
I solved it by using a nth
flex item , which is also a new flexbox / flex container using justify-content: flex-end
, but I couldn't find any examples that did it - is this the correct or acceptable solution according to the standard, and if not, how would I deal with flexbox?
Here's an example:
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 300px;
height: 240px;
background-color: Silver;
}
.flex-container-bottom {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 300px;
height: 240px;
background-color: orange;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.flex-item {
background-color: DeepSkyBlue;
width: 100px;
height: 100px;
margin: 5px;
}
.flex-item-bottom {
background-color: red;
width: 100%;
height: 50px;
}
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item flex-container-bottom">
<div class="flex-item-bottom">flex item 2</div>
</div>
</div>
source to share
specificationis not entirely clear, but it says "every child thread of a flex container becomes a flex item, and every continuous run of text that is directly contained within the flex container is wrapped in an anonymous flex item." This seems to mean that if I place a flex container in another flex container, the inner flex container will also implicitly become a flex for its flex container, even if not explicitly defined. Example 1 of the spec shows a flex container in a flex container and assumes this is legal syntax since my use case might also be legal, but the section with example 1 is marked non-normative ... (╯ ° □ °) ╯ (┻ ━┻ ... At this point, I'm just assuming it's correct.
source to share
It's hard to tell which usage flex-end
is wrong because you get the effect you want, but there is an easier way to do it.
Try using:
.flex-container{
display: flex;
justify-content: space-between;
flex-direction: column;
}
justify-content: space-between;
forces flex items to spread as much as possible in the flex container.
This is the reference guide that I use when doing anything with flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
source to share