Streaming live at 10am (PST)

Flexbox wrap children not having affect child elements


#1

I was watching the video how to create a layout with Flexbox, the one with a big image on the left side and 4 images on the right side but I can't find the Flex Child Settings on Tools.
I need to know how to make the 4 boxes at 50% Sizing on the right side.

The UI for Flexbox already changed and probably the video was made before the UI redesign (BTW, you guys should update the videos).

Here is the video that explains hot to setup Flex Child Settings (on 2:29): https://www.youtube.com/watch?v=1qt_KpPC1xo

I don't have a link for the site since just started.

Thanks in advance


Here is my public share link: LINK
(how to access public share link)


#2

Hi @carlos94587,

Definitely a good question! :smile: You can view an updated tutorial of Webflow and Flexbox at the following URL: https://help.webflow.com/article/the-flexbox-guide

Also, I created a short video highlighting where the cog icon can be found to create the 4 box at 50% layout you are looking for: https://drive.google.com/file/d/0BynZs0dQwPd_SnBMZkd3OTV4SnM/view

Hopefully this helps :blush:


#3

I'll check the video and link. I don't see the layout I am trying to make on the link :confused:


#4

hi @micahryanhtml , here is the problem that I have. On the right side, I should have the 4 photos aligned with the one on the left but instead is adding the photos just in one row.


#5

here is the share link if you can help me: https://preview.webflow.com/preview/base-site?preview=84bddba8f5c18fc8cdfdeb2f8e9dd32a


#7

Hi @carlos94587, by one row do you mean you want the images to be 2 across and wrap, or one vertical row?

Actually, while taking a look at this some errors popped in the console, I am investigating.


#8

HI there,

What I am trying to do have this grid. Thanks


#9

Hi @carlos94587,

The layout you are looking to create can be completed by setting your "flex item" to have flex basis values of 1 0 50%. Then, all the children elements can have an expanded flex basis.

To see the steps I took to complete this layout, feel free to take a look at the following video: https://drive.google.com/file/d/0BynZs0dQwPd_VXJBWHpQLXY2U28/view

Hopefully this helps :blush:


#10

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.