Ran into one issue with this. If, on desktop, the amount of content in
"two" is more than "one", "three" gets pushed down and stays below "two". I
played with align-items and align-content but was unsuccessful in stopping
it from happening.
On Tue, Mar 5, 2019 at 4:54 AM Vince Aggrippino <vinceaggripp...@gmail.com>
wrote:
> On Sat, Mar 2, 2019 at 4:55 AM Tom Livingston <tom...@gmail.com> wrote:
> >
> > Hello listers,
> >
> > Is it possible to do the following with flexbox?
> >
> > mobile (just a stack, no flex yet):
> > 1
> > 2
> > 3
> >
> > desktop (two-column with different order):
> > 2 1
> > 3
> >
> > Struggling with this...
> > TIA
>
> @media (min-width: 800px) {
> .container {
> display: flex;
> flex-wrap: wrap;
> justify-content: flex-end;
> }
>
> .container > div {
> flex-basis: 50%;
> flex-grow: 0;
> }
>
> .container > div:first-child { order: 2; }
> .container > div:nth-child(2) { order: 1; }
> .container > div:nth-child(3) { order: 3; }
> }
>
> flex-wrap allows it to go to the next line after the second block
> (first one in source) is displayed.
>
> justtify-content: flex-end pushes the last element displayed to the
> right-hand side.
>
> flex-basis: 50% is a suggestion for how large we'd like the element to
> be. 50% makes it wrap after the 2nd element is displayed.
>
> flex-grow: 0 prevents the last element from stretching to the full width.
>
> The order numbers should be self-explanatory. The elements will be
> shown in the order of their numbers, but they don't need to be
> sequential or even all different. The default is 0 and if two are the
> same they'll be displayed in source order.
>
> If you'd like to see this: https://codepen.io/VAggrippino/pen/YgGdBd
>
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
______________________________________________________________________
css-discuss [css-d@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/
