Menu
I'm trying to learn flexbox and I really like it. I'm trying το play with dynamic widths and when I do it with divs it works. If I try to do it with li, it doesn't work as well. My code is up on codepen.
div.example ul li | 1 li | 2 li | 3 li | 4 li | 5 li | 6 div.container div.col | 1 div.col | 2 div.col | 3 div.col | 4 div.col | 5 div.col | 6 SASS Code
.container { border: 1px solid #000; display: flex; flex-direction: row; flex-wrap: wrap; width: 50%; .col { width: calc(100% / 3); height: 120px; text-align: center; } } .example { display: flex; flex-direction: row; flex-wrap: wrap; width: 50%; border: 1px solid #000; margin: 1em 0; ul { width: 100%; padding-left: 0; } li { list-style: none; display: inline-block; width: calc(100% / 3); height: 120px; text-align: center; } } 
928
To start using the Flexbox model, all you need to do is first define a flex-container. If you glanced at that, you must have seen that the unordered list ( ul ) houses the list elements( li ). You'd call the ul the parent element, and the li the child element.
By simply initializing a flexbox container in the parent ul element, the child li will be displayed horizontally instead of vertically. No further code changes required. And I get the added benefit of having my ul element now a flexbox container.
You could use flexbox on everything but you really shouldn't. Flexbox is a new layout algorithm for laying out complex web pages/applications, but he also have it disadventages(temporarily the most slower layout). Basically flexbox is the most best for smaller page components and UI elements.
You need to apply the flex properties to the <ul>
ul { display: flex; flex-direction: row; <-- not needed as this is the default behavior flex-wrap: wrap; } Putting the properties on the <div> tells it to display the <ul> in flex, not <li>.
118
Based on your markup, note that the <li> elements are the child of <ul>, not the .example division element.
<div class="example"> <ul> <li>1</li> </ul> </div> Since the immediate parent of the <li> elements are <ul>, use the flex properties on the <ul> that is wrapping around the multiple <li> elements, instead of the outer <div> element:
.example { width: 50%; border: 1px solid #000; margin: 1em 0; ul { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; padding-left: 0; } li { list-style: none; display: inline-block; width: calc(100% / 3); height: 120px; text-align: center; } } http://codepen.io/anon/pen/NGPBbg
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
