HELP ME! FLEX center

Beginners
,
1

Tell me how to align the blocks to the right and that the content is left centered

111
111.jpg1767Ă—872 265 KB

If you select >> justify start when resizing, the blank space on the right

2

How does it look in Browser ?

3

browser? also. I’m trying to make a grid like as on this site http://y8.com. div item game.

4

Simple question really. How does it look in browser which is a live environment rather than the built in Pinegrow broswer?

5

also) sorry, using translator

6

how to achieve this effect in pinegrow?

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA
Снимок.PNG1538×769 59.5 KB

7

you will have difficulty doing this with Flex as Flex moves things in ONE DImension - that is… it only orders things in ONE LONG ROW - it has no idea, what comes next.

you could try flex box froggy, to give you some idea of how to position things in Flex box :slight_smile:

and @itsmeleo has created a video where he provides all the solutions (including the last one -which was the only one I couldn’t figure out mysefl)

and it might be better to post this in JUST one area, @artimm as there are now two seperate threads for this.

8

maybe try using css grid, instead of flexbox
as flexbox is really good at doing things in ONE PLANE - that is on one continues row.

it has NO AWARENESS of what comes next!
on the next row.

whereas
CSS Grid, knows the the whole page layout as it dictates the layout.

here is a free course on css grid

and this woman’s work is pretty good.
she speaks quite slow (sometimes) so translation could be easier for you.

this explains using css grid to get white space

this is how to get css grid layout to be arty. and how to fall back for older browsers

1 Like
9

just use flex-grow: 1 on child

10

…or, what he said! yes him, @itsmeleo
:slight_smile:

he’s clever!

1 Like
11

I would be grateful if you show an example

12

For a predictable outcome, you could try to use Bootstrap’s columns which is well implemented in pinegrow. Furthermore, have you tried to open y8.com in Pinegrow using the “open url” feature? You could study it’s structure that way.

13

I need a fixed size irem. “open url” - this is the first thing I tried

14

ok, @artimm, I dont know how to help you with this, I shall wait and see what others say.
Good luck.
:slight_smile:

16

I found a couple of ways, but I do not want to use a grid https://codepen.io/justincavery/pen/PjYEjN