Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Flexbox Layout Flexbox Properties Aligning Flex Items on the Cross Axis

John Yzaguirre
John Yzaguirre
22,025 Points
Posted by John Yzaguirre
John Yzaguirre
22,025 Points

Tried to challenge myself and now i'm totally confused

In the align flex items class video we went over how to align-self using stretch, flex-start and flex-end. There is a row of 4 items. I noticed we could align the items center and the background blue color would shrink around the content. Is there a way to position the text without that happening? I would like to push the content to the bottom of the flex box, but have the blue color still fill the remaining space above. Everything I've tried breaks the flex-box, so it looks right until you resize the screen. Thanks for any help with this!

3 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

One very important and useful thing to note is that flex items can also be flex containers for other flex items. So you can add the following three properties to the .item CSS rule to achieve what I think you're trying to get:

.item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

I think this just further proves the power of flexbox! :)

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

How about wrapping the content in another container (DIV) and allowing that div to "sink" in the flex item by positioning it at the bottom? Here's some code excerpts:

code.html 
        <div class="item-4 item">
            <div class="sinker">  <!-- new inner item wrapper -->
                Item 4
                <p>Sriracha raw denim fixie.</p>
            </div>
        </div>
style.css 
.item {
    flex: 1;
    position: relative;  /* reference for the sinker */
}
.sinker {
    position: absolute;  /* put it on the bottom */
    bottom: 0;
}
John Yzaguirre
John Yzaguirre
22,025 Points
John Yzaguirre
John Yzaguirre
22,025 Points

Thanks for your reply! This does put it to the bottom, but it is positioned out of center. I figured out a way to get the job done. Check it out if you're interested!

John Yzaguirre
John Yzaguirre
22,025 Points
John Yzaguirre
John Yzaguirre
22,025 Points

So I figured out what I was trying to do. It has a break-point, but it does the job and keeps the p element centered.

I added a div that doesn't wrap around anything. It just sits right above the p element like this:

<div class="pusher"></div>
            <p>Mustache cred 3 wolf moon shabby chic,
 flannel vegan Godard selfies aesthetic 
taxidermy post-ironic forage deep v tousled.</p></div>

then I created some height so it pushes the p element to the bottom. At first I used calc for the height value, but there was nothing percentage or vh based, so I just did the math subtracting from the containers height. I also removed the margin the p element had so it sits right at the bottom. There is a min width and height so it doesn't get too squashed. This does end up breaking it at the smaller view-port sizes, but I think a media-query is in order anyways so it is not that much of a problem.

.item-1 p{
  display: inline-block;
  margin: 0;
  min-width: 165px;
  min-height: 136px;
}

.pusher {
 height: 228px;
}