On 5/22/2017 12:50 PM, Tom Livingston wrote:
Hello list,
Given the following:
<ol>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<ol>
ol{
position: absolute;
display: flex;
flex-direction: column;
height: 100%; /* 100% of taller parent */
}
ol li{
display: flex;
flex:1;
}
ol li a{
flex:1;
}
the OL is absolute and 100% height of a taller parent, so the LIs are
taller than the text inside them.
This gets me very close to where I want to be except the text needs to
be centered vertically. What's the best way to accomplish this? Am I
missing a flex method that will do it?
Hi Tom,
I know you're very advanced in your CSS skills, so looking at the
structure and CSS we're deploying on our home page should give you some
clues:
http://www.projectseven.com/
You need to be careful with height as it is really not necessary if you
structure the markup correctly, and height on any element not a direct
child of the flex element will not work on Safari.
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
