First experience with flexbox

HTML-CSS
1

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.

1 Like
2

I would use an HTML table, but there are doubtless better options, like React’s 12-width grid or something.

3

Flexbox is a good choice.
these code should be deleted.


.left img{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  border: 3px solid white;
  border-radius: 10px;
}

.left p{
  width: 75%;
  margin-left: 20%;
  display: inline-flex;
  padding: 1rem;
}

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:

display: flex;

image will become stretched, because ‘align-items’ default is stretch, because of this set align-items to center. this will center the items horizontally.

align-items: center;
4

And why do you have auto-preview disabled. Are you aware of this feature?

5

I actually don’t know what it is, nor I can find it in the setting. What is that about?

6

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?

8

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).

9

settings > behavior > Auto-Updating Preview

10

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/

1 Like
11

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 :slight_smile: I am trying to do both, being practical and looking for explanation when I do not understand.

1 Like