CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
daveycroqet
daveycroqet

Reputation: 2727

Align an element at the bottom of a container inside a flexbox

Fiddle here.

I'm trying to stick the white caret (^) to the bottom of .section-1, horizontally centered but at the very bottom. As you can see, the caret itself is located within a Bootstrap container-fluid which itself is inside a flex-box (applied via the vertical-center class).

I've attempted traditional positioning with margins and bottom: 0;, etc. to no avail. Likewise, the flex-end property is not working as I had thought. All solutions and recommendations are welcome, so long as they continue to utilize the flexbox.

Upvotes: 0

Views: 730

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372224

You can make this happen using a nested flex container.

HTML 

<!-- one adjustment; add span -->
<div class="align-me-center"><span>Here is some centered text.</span></div>

CSS

/* ADJUSTMENT TO RULE */

.section-1 {
    min-height: 500px;
    background-color: #0099cc;
    height: 500px; /* necessary for child div with percentage height to work;
                      min-height overrides height, so no worries */
}

/* NEW RULES */

.container-fluid { 
    display: flex; /* establish nested flex container */
    flex-direction: column;
    height: 100%; /* use full height of container */
    justify-content: center; /* position flex items at opposite end of container */
}

.align-me-center { 
    display: flex; /* nested flex container to center flex item (span) */
    align-items: center;
    justify-content: center; 
    height: 100%;
}

DEMO: http://jsfiddle.net/b26j5m6t/3/

Upvotes: 1

Related Questions