Flex question

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Flex question

Tom Livingston
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?

Thanks


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Flex question

Al Sparber
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Flex question

Al Sparber
Just for the hell of it, try this:

<ol>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="fubar"><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ol>

CSS:
ol{
      display: flex;
      flex-direction: column;
         margin: 0px;
         padding: 0px;
}
ol li {
        display: inline-flex;
        justify-content: center;
}
ol li:nth-child(odd) {
         background-color: red;
}
ol li:nth-child(even) {
         background-color: green;
}
ol li a{
         color: #000;
}
.fubar {
        line-height: 600%;
}
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Flex question

Tom Livingston
In reply to this post by Al Sparber
On Mon, May 22, 2017 at 1:20 PM, Al Sparber <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Flex question

Tom Livingston
Thanks Al. This was the hint I needed.


>>
>> 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/


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Loading...