On Mon, May 22, 2017 at 1:20 PM, Al Sparber <aspar...@roadrunner.com> wrote:
> 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.
>
Thanks Al. I'll take a look. I've still not used flex enough to know it well.
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
______________________________________________________________________
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/
