Howto position container into an...

User 131545 Photo


Registered User
595 posts
Online Now

Hey support,

Can someone explain the steps in the form of a video or text how two containers in a subgrid or colum positioning so two containers side by side and two under another. How do you do that?
Which CSS properties do you use in the positioning of the containers?
I want developed responsive websites.

Kind regards
Stephane
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 379556 Photo


Registered User
852 posts

The column is given a Position setting as follows -
Display:Flex; Direction:Row; Wrap:Wrap; Justfy:Flex Start.

1. For two containers side by side, each container is given a Width setting of 50%.

2. For two container stacked one on top of the other, each container is given a Width setting of 100%.

3. For two containers underneath a single container, each container having a separate class,
(a) the single container is given a Width setting of 100%, and Flexbox Order setting of 0;
(b) the two containers are given a Width setting of 50%, and a Flexbox Order setting of 1 and 2 respectively

If I have misunderstood exactly what is wanted, I think a diagram would help.

Frank
User 131545 Photo


Registered User
595 posts
Online Now

Hi Frank

Can you more explean the points (a) and (b) with steps?
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 379556 Photo


Registered User
852 posts

Let's say that three containers have been put in the column, and have been given the following classes -
container-1
Container-2
container-3

Step 1
Select container-1, and in the Design panel go to the Flexbox heading (clicking on it to open it if it's not already open). In the Order box, set the figure to zero if it's not already zero.
Still in the Design panel go to the Dimensions heading, and in the Width line it will probably show 'auto' against a white background. Clicking on that word 'auto' will show a drop-down menu, from which '%' should be selected. The number 100 should be entered in the Width box.

Step 2
Do the same for container-2, but in the Order box set the figure to 1, and for the Width % enter the figure 50.

Step 3
Do the same for container-3, but in the Order box set the figure to 2, and for the Width % enter the figure 50.

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.