Flexbox question

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|

Flexbox question

Tom Livingston
List,

I haven't used flex at all basically, but have an opportunity to.

I have rows of 3 items. I would like them evenly spaced, but if the last
row has only 2 items, I'd like the same amount of space between but I want
them aligned to the left (like text-align:left). I can't seem to get this.
Is it possible? I've gotten close, but last two items are far left and far
right.

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
|

Re: Flexbox question

Karl DeSaulniers
Hey Tom,
Can you create a blank one that fills in for the third that you can then space from?

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Apr 10, 2017, at 3:01 PM, Tom Livingston <[hidden email]> wrote:
>
> List,
>
> I haven't used flex at all basically, but have an opportunity to.
>
> I have rows of 3 items. I would like them evenly spaced, but if the last
> row has only 2 items, I'd like the same amount of space between but I want
> them aligned to the left (like text-align:left). I can't seem to get this.
> Is it possible? I've gotten close, but last two items are far left and far
> right.
>
> 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/

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

Re: Flexbox question

Tom Livingston
Hmm. A bit hack-y, but interesting thought. I'll tuck that away. ;-)

On Mon, Apr 10, 2017 at 4:37 PM, Karl DeSaulniers <[hidden email]>
wrote:

> Hey Tom,
> Can you create a blank one that fills in for the third that you can then
> space from?
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> > On Apr 10, 2017, at 3:01 PM, Tom Livingston <[hidden email]> wrote:
> >
> > List,
> >
> > I haven't used flex at all basically, but have an opportunity to.
> >
> > I have rows of 3 items. I would like them evenly spaced, but if the last
> > row has only 2 items, I'd like the same amount of space between but I
> want
> > them aligned to the left (like text-align:left). I can't seem to get
> this.
> > Is it possible? I've gotten close, but last two items are far left and
> far
> > right.
> >
> > 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/
>
> ______________________________________________________________________
> 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/




--

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
|

Re: Flexbox question

Al Sparber
In reply to this post by Tom Livingston
On 4/10/2017 4:01 PM, Tom Livingston wrote:
> List,
>
> I haven't used flex at all basically, but have an opportunity to.
>
> I have rows of 3 items. I would like them evenly spaced, but if the last
> row has only 2 items, I'd like the same amount of space between but I want
> them aligned to the left (like text-align:left). I can't seem to get this.
> Is it possible? I've gotten close, but last two items are far left and far
> right.

See if you can work with this:
http://www.projectseven.com/csslab/flexbox/tom-cssd/
It's all in the head.

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

Re: Flexbox question

Tom Livingston
On Mon, Apr 10, 2017 at 5:24 PM, Al Sparber <[hidden email]> wrote:

> On 4/10/2017 4:01 PM, Tom Livingston wrote:
>
>> List,
>>
>> I haven't used flex at all basically, but have an opportunity to.
>>
>> I have rows of 3 items. I would like them evenly spaced, but if the last
>> row has only 2 items, I'd like the same amount of space between but I want
>> them aligned to the left (like text-align:left). I can't seem to get this.
>> Is it possible? I've gotten close, but last two items are far left and far
>> right.
>>
>
> See if you can work with this:
> http://www.projectseven.com/csslab/flexbox/tom-cssd/
> It's all in the head.
>
>

This looks good. I think I might be able to run with this. Thanks Al.

Seems like the key to what I was after was  flex-direction: column (as
opposed to row) - to keep the last two items to the left.

Thanks again.


--

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
|

Re: Flexbox question

Al Sparber
>> See if you can work with this:
>> http://www.projectseven.com/csslab/flexbox/tom-cssd/
>> It's all in the head.
>>
>>
>
> This looks good. I think I might be able to run with this. Thanks Al.
>
> Seems like the key to what I was after was  flex-direction: column (as
> opposed to row) - to keep the last two items to the left.

Actually, it's a combination of "grow" being set to zero and the
flex-basis (suggested width). The default position for a flexbox element
is left. Study up on inline-flex too as that opens the door to vertical
positioning options.

> Thanks again.

NP.

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

Re: Flexbox question

Crest Christopher
In reply to this post by Tom Livingston
Interesting method of using FlexBox; for someone whom has never used Flexbox 😊

Christopher

From: Tom Livingston
Sent: Monday, April 10, 2017 5:40 PM
To: CSS Discussion Group
Subject: Re: [css-d] Flexbox question

On Mon, Apr 10, 2017 at 5:24 PM, Al Sparber <[hidden email]> wrote:

> On 4/10/2017 4:01 PM, Tom Livingston wrote:
>
>> List,
>>
>> I haven't used flex at all basically, but have an opportunity to.
>>
>> I have rows of 3 items. I would like them evenly spaced, but if the last
>> row has only 2 items, I'd like the same amount of space between but I want
>> them aligned to the left (like text-align:left). I can't seem to get this.
>> Is it possible? I've gotten close, but last two items are far left and far
>> right.
>>
>
> See if you can work with this:
> http://www.projectseven.com/csslab/flexbox/tom-cssd/
> It's all in the head.
>
>

This looks good. I think I might be able to run with this. Thanks Al.

Seems like the key to what I was after was  flex-direction: column (as
opposed to row) - to keep the last two items to the left.

Thanks again.


--

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/

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

Re: Flexbox question

Nancy Johnson
In the past I used it only for equal heights only but there is a great
deal I am learning about.  It is a very powerful tool.
You do have to be careful for older browsers and have a fall back for those.

This link has been very helpful for me
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Nancy

On Sat, Apr 22, 2017 at 2:10 AM,  <[hidden email]> wrote:

> Interesting method of using FlexBox; for someone whom has never used Flexbox 😊
>
> Christopher
>
> From: Tom Livingston
> Sent: Monday, April 10, 2017 5:40 PM
> To: CSS Discussion Group
> Subject: Re: [css-d] Flexbox question
>
> On Mon, Apr 10, 2017 at 5:24 PM, Al Sparber <[hidden email]> wrote:
>
>> On 4/10/2017 4:01 PM, Tom Livingston wrote:
>>
>>> List,
>>>
>>> I haven't used flex at all basically, but have an opportunity to.
>>>
>>> I have rows of 3 items. I would like them evenly spaced, but if the last
>>> row has only 2 items, I'd like the same amount of space between but I want
>>> them aligned to the left (like text-align:left). I can't seem to get this.
>>> Is it possible? I've gotten close, but last two items are far left and far
>>> right.
>>>
>>
>> See if you can work with this:
>> http://www.projectseven.com/csslab/flexbox/tom-cssd/
>> It's all in the head.
>>
>>
>
> This looks good. I think I might be able to run with this. Thanks Al.
>
> Seems like the key to what I was after was  flex-direction: column (as
> opposed to row) - to keep the last two items to the left.
>
> Thanks again.
>
>
> --
>
> 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/
>
> ______________________________________________________________________
> 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/
______________________________________________________________________
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
|

Re: Flexbox question

Chris F.A. Johnson
On Tue, 25 Apr 2017, Nancy Johnson wrote:

> In the past I used it only for equal heights only but there is a great
> deal I am learning about.  It is a very powerful tool.
> You do have to be careful for older browsers and have a fall back for those.
>
> This link has been very helpful for me
> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg

--
Chris F.A. Johnson, <http://cfajohnson.com>
______________________________________________________________________
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
|

Re: Flexbox question

Crest Christopher
What is that image ? I know what it is but it appears as junk ?

Christopher

From: Chris F.A. Johnson
Sent: Tuesday, April 25, 2017 7:57 PM
To: CSS Discussion Group
Subject: Re: [css-d] Flexbox question

On Tue, 25 Apr 2017, Nancy Johnson wrote:

> In the past I used it only for equal heights only but there is a great
> deal I am learning about.  It is a very powerful tool.
> You do have to be careful for older browsers and have a fall back for those.
>
> This link has been very helpful for me
> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg

--
Chris F.A. Johnson, <http://cfajohnson.com>
______________________________________________________________________
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/

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

Re: Flexbox question

Chris F.A. Johnson
On Tue, 25 Apr 2017, [hidden email] wrote:

> What is that image ? I know what it is but it appears as junk ?

It's a screenshot of the page in question.

>
> Christopher
>
> From: Chris F.A. Johnson
> Sent: Tuesday, April 25, 2017 7:57 PM
> To: CSS Discussion Group
> Subject: Re: [css-d] Flexbox question
>
> On Tue, 25 Apr 2017, Nancy Johnson wrote:
>
>> In the past I used it only for equal heights only but there is a great
>> deal I am learning about.  It is a very powerful tool.
>> You do have to be careful for older browsers and have a fall back for those.
>>
>> This link has been very helpful for me
>> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
>
> Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg
>
>

--
Chris F.A. Johnson, <http://cfajohnson.com>
______________________________________________________________________
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
|

Re: Flexbox question

Tom Livingston
I think his breakoints aren't quite right for that 3-column layout.
The site itself is very useful and informative.

On Tue, Apr 25, 2017 at 9:04 PM, Chris F.A. Johnson
<[hidden email]> wrote:

> On Tue, 25 Apr 2017, [hidden email] wrote:
>
>> What is that image ? I know what it is but it appears as junk ?
>
>
> It's a screenshot of the page in question.
>
>
>>
>> Christopher
>>
>> From: Chris F.A. Johnson
>> Sent: Tuesday, April 25, 2017 7:57 PM
>> To: CSS Discussion Group
>> Subject: Re: [css-d] Flexbox question
>>
>> On Tue, 25 Apr 2017, Nancy Johnson wrote:
>>
>>> In the past I used it only for equal heights only but there is a great
>>> deal I am learning about.  It is a very powerful tool.
>>> You do have to be careful for older browsers and have a fall back for
>>> those.
>>>
>>> This link has been very helpful for me
>>> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
>>
>>
>> Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg
>>
>>
>
> --
> Chris F.A. Johnson, <http://cfajohnson.com>
> ______________________________________________________________________
> 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/



--

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
|

Re: Flexbox question

Nancy Johnson
I found it very helpful.  I was only looking for syntax to plug into
my page fast. It provided that. I didn't need to look at their layout
other than to see if it solved my problem.

Nancy

On Tue, Apr 25, 2017 at 10:24 PM, Tom Livingston <[hidden email]> wrote:

> I think his breakoints aren't quite right for that 3-column layout.
> The site itself is very useful and informative.
>
> On Tue, Apr 25, 2017 at 9:04 PM, Chris F.A. Johnson
> <[hidden email]> wrote:
>> On Tue, 25 Apr 2017, [hidden email] wrote:
>>
>>> What is that image ? I know what it is but it appears as junk ?
>>
>>
>> It's a screenshot of the page in question.
>>
>>
>>>
>>> Christopher
>>>
>>> From: Chris F.A. Johnson
>>> Sent: Tuesday, April 25, 2017 7:57 PM
>>> To: CSS Discussion Group
>>> Subject: Re: [css-d] Flexbox question
>>>
>>> On Tue, 25 Apr 2017, Nancy Johnson wrote:
>>>
>>>> In the past I used it only for equal heights only but there is a great
>>>> deal I am learning about.  It is a very powerful tool.
>>>> You do have to be careful for older browsers and have a fall back for
>>>> those.
>>>>
>>>> This link has been very helpful for me
>>>> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
>>>
>>>
>>> Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg
>>>
>>>
>>
>> --
>> Chris F.A. Johnson, <http://cfajohnson.com>
>> ______________________________________________________________________
>> 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/
>
>
>
> --
>
> 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/
______________________________________________________________________
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
|

Re: Flexbox question

Tom Livingston
I think he may have recently changed the site design as well. I don't
remember that left side nav before.



On Wed, Apr 26, 2017 at 7:08 AM Nancy Johnson <[hidden email]> wrote:

> I found it very helpful.  I was only looking for syntax to plug into
> my page fast. It provided that. I didn't need to look at their layout
> other than to see if it solved my problem.
>
> Nancy
>
> On Tue, Apr 25, 2017 at 10:24 PM, Tom Livingston <[hidden email]> wrote:
> > I think his breakoints aren't quite right for that 3-column layout.
> > The site itself is very useful and informative.
> >
> > On Tue, Apr 25, 2017 at 9:04 PM, Chris F.A. Johnson
> > <[hidden email]> wrote:
> >> On Tue, 25 Apr 2017, [hidden email] wrote:
> >>
> >>> What is that image ? I know what it is but it appears as junk ?
> >>
> >>
> >> It's a screenshot of the page in question.
> >>
> >>
> >>>
> >>> Christopher
> >>>
> >>> From: Chris F.A. Johnson
> >>> Sent: Tuesday, April 25, 2017 7:57 PM
> >>> To: CSS Discussion Group
> >>> Subject: Re: [css-d] Flexbox question
> >>>
> >>> On Tue, 25 Apr 2017, Nancy Johnson wrote:
> >>>
> >>>> In the past I used it only for equal heights only but there is a great
> >>>> deal I am learning about.  It is a very powerful tool.
> >>>> You do have to be careful for older browsers and have a fall back for
> >>>> those.
> >>>>
> >>>> This link has been very helpful for me
> >>>> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
> >>>
> >>>
> >>> Not a page I'd use as a good example: http://b.cfaj.ca/flex.jpg
> >>>
> >>>
> >>
> >> --
> >> Chris F.A. Johnson, <http://cfajohnson.com>
> >> ______________________________________________________________________
> >> 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/
> >
> >
> >
> > --
> >
> > 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/
>
--

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/