The ordered list has its initial layout controlled by a row flexbox layout and the list items are controlled by a column flexbox layout. |
Containing ul tag flexbox CSS is… ul { display: flex; flex-flow: row wrap; justify-content: flex-start; } |
Markup for the list item is…<li> <h3>Header</h3> <p class="price"><sup>$</sup>100</p> <p class="details">CSS Aligning Last Item</p> <a class="button" href=""><p>Buy Now</p></a> </li> |
The Flexbox CSS for the li tag is…li { display: flex; flex-flow: column nowrap; margin-top: auto; } |
JSFiddle Example Link |
Showing posts with label flex. Show all posts
Showing posts with label flex. Show all posts
Tuesday, February 25, 2020
CSS Aligning Last Item to the Bottom of a Container Using Flex Attribute
Saturday, June 16, 2018
HTML + CSS TRICKS, FLOAT LEFT DIV WITH EQUAL HEIGHT, MAGIC OF USING FLEX - CSS BEGINING
<section class="container"> <div class="left-half"> <article> <h1>Left Half 1</h1> </article> </div> <div class="left-half"> <article> <h1>Left Half 2</h1> </article> </div> <div class="left-half"> <article> <h1>Left Half 3</h1> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 4</h1> <p>Weekends don't</p> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 5</h1> <p>Weekends don't</p> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 6</h1> <p>Weekends don't</p> </article> </div> </section> |
html, body, section { height: 100%; } body { color: #fff; font-family: sans-serif; font-size: 1.25rem; line-height: 150%; text-align: center; text-shadow: 0 2px 2px #b6701e; } h1 { font-size: 1.75rem; margin: 0 0 0.75rem 0; } .container { display: flex; flex-flow: row wrap; justify-content: flex-start; } .left-half { background-color: #ff9e2c; padding: 0; width: calc(50% - 6px); border: 2px solid red; display: flex; justify-content: flex-start; align-items: flex-start; } |
|
Jsfiddle link |
Subscribe to:
Posts (Atom)