Monday, 15 January 2018

CSS flexbox vertical stack with bottom-anchored element

How can I use flexbox layouts to create a vertical stack
(column) of divs with one div anchored to the bottom of the
container?



|--------|
|
            div1 |
| div2 |
| div3 |
| |
|
            |

| |
| fixed1
            |
|--------|


For
example, in this rel="nofollow">fiddle I want Items 1, 2, and 3 to be horizontally centered
and vertically aligned to the top and Fixed Item to be horizontally centered and
vertically aligned to the
bottom.



HTML



            class="container">

 
Item
            1

 
Item 2

             class="item">Item 3

Fixed
Item




CSS



html,
            body {

 min-height: 100%;
 height:
            100%;
}

.container {
 height: 50%;

            background: #EEE;
 display: flex;
 flex-direction:
            column;
 align-items: flex-start;

 align-content:
            center;
}

.fixed {
 align-self:
            flex-end;
}
-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print ...