Images and text display inline or flex

1

What i have is this:

image
image786×439 56.3 KB

The css:

.flex_songs {
  display: flex;
  align-content: space-between;
  justify-content: flex-start;
}

Another example of things not going my way:
image
What i want:

image
image700×260 34.4 KB

How do i get the image and text to align to one side while having space between the image and text while having the text align at the center of the image? Cause at time goes on, i plan on having another list but with buttons to be aligned on the same line as the text.

2

Hello @deedee

It would be best to post the full code to have a better understanding. However, I do notice that in your code, there isn’t a flex-direction property being defined (row or column). Whether this may help is yet to be known.

3

I think that a two column grid would be easier for what you want here. If you want to stick with flexbox try to put the logos and the names into two
Separate divs that both use flex. See code below but use start end on top.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>
4

what do you mean by full code? Is the css not enough?

5

this is the code for the one with the pink background

 <TableCell className={styles.flex_songs}>
                      <Image
                        src={song.track.album.images[0].url}
                        rounded
                        size="mini"
                      />
                      <p>{song.track.name} </p>
 </TableCell>
6

I used your suggestion:

image
image784×489 60.1 KB

How do i get the text closer to the pic, like in this pic:

image
image700×260 34.4 KB

Padding right does not work

7

Try flex: 0 0 xxxpx; in the left column div to servitude to xxxpx width.
If you just want the logos to the right try align-items : flex-end or justify-content : flex-end. Whichever helps :wink:

8

Why does padding right not work? Any idea? :wink:

9

i have no idea. Maybe cause the div or container the image and text are in has no specific width but a width that resizes according to content? Please help. Thank you.

10

Best guess is your left column(image) also has the width of 50%. So it is taking of 50% of the row automatically. Padding doesn’t work because your text is already left justified and the padding right is not squeezing your text anywhere.

Your browser’s dev tool does a perfectly good job of giving you all the dimensions of your elements, including padding and margins. Do make use of it when you run into issues such as this. A lot of times it gives you far more information that will help you resolve the problem then us guess blindly without seeing your source code.

11

Something like this?
https://codepen.io/lasjorg/pen/ExjRXjo

12

Can you explain where you got this?

<svg class="like liked" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>

Thank you

13

The SVG is from Feather, I just copied the SVG code from the site.

  1. Right-click the icon you want and click Inspect.

  2. In the Elements tab, right-click the SVG element and from the menu select Copy, from the submenu select Copy outerHTML.