Can this be done with Flexbox

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
crispy68
 
 
Posts: 253
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Can this be done with Flexbox

Post by crispy68 » Sun Sep 24, 2017 5:52 pm

Hello, trying to simply implement the following using flexbox.

Image

I have an image on the left with a text box on the right. I've set the following for the flexbox container:

flex-direction: row
flex-wrap: nowrap
justify-content: flex-start
align-items: center
align-content: center

it looks correct in the workspace (as above) but when previewed the text runs off to the right and does not wrap. I have adjusted various parameters on the container and the text object itself with no results. Not sure if I've not come upon the correct combination or if it's not possible.

any help would be appreciative. Also, as with the layout grid you can make the images scale. Is this possible with flex box as well?

User avatar
Pablo
 
Posts: 19667
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Can this be done with Flexbox

Post by Pablo » Sun Sep 24, 2017 6:05 pm

You will need to set a flex grow/shrink value for the text otherwise the browser will not wrap it.
Is this possible with flex box as well?
In flexbox the flex properties of the element control the scaling.

User avatar
crispy68
 
 
Posts: 253
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Can this be done with Flexbox

Post by crispy68 » Sun Sep 24, 2017 8:03 pm

Thanks Pablo,

I set the flexbox-property of the image to 0 and the text to 1. I also set the flex-basis of the text to 48%, added some padding to the text object and it seems to work pretty good now.

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests