I have started a new project today in HTML and CSS trying to use and understand a bit more of Flexbox. This is the pen I am working with for now:
My question is: How can I have the picture on the left hand side and the paragraph right next to it, possible centred to the image level? Is flexbox what I have to use to obtain this? Or bootstrap is the best option? I am quite new to all this frameworks and I dont know yet which one is better for which project.
Thank you very much for your support.
I would use an HTML table, but there are doubtless better options, like React’s 12-width grid or something.
Flexbox is a good choice.
these code should be deleted.
border: 3px solid white;
and you should set an id attribute to div, which contains your img and p tags. Then declare it as a flex container using this:
image will become stretched, because ‘align-items’ default is stretch, because of this set align-items to center. this will center the items horizontally.
And why do you have auto-preview disabled. Are you aware of this feature?
I actually don’t know what it is, nor I can find it in the setting. What is that about?
Oh wow! That was great!! Thanks!
Can you explained me why it worked? The display: flex property tell all the element in the div to occupy all the space in equal parts?
When you add display: flex to an element, the items within the element are packed towards the start by default.
If you want to space the elements in equally, you can use justify-content: space-evenly; on the flex container (the same div you put display: flex on).
settings > behavior > Auto-Updating Preview
Seems like you don’t understand flexbox fully.
You can watch this video (SPOILER: it’s awesome): https://www.youtube.com/watch?v=G7EIAgfkhmg
Then part 2 of it: https://www.youtube.com/watch?v=H1lREysgdgc
You can also play this little game: https://flexboxfroggy.com/
No, I dont really understand it still because it is honestly my first ever approach to it and I am trying to understand it doing it, more than simply reading I am trying to do both, being practical and looking for explanation when I do not understand.