css Question posted in
Some basic documentation can be found here.

Css – Flexbox – rectangle with text on left and image on right

Producing a dashboard which has a column filled with rectangles to access different applications.

Each application is represented as a grey rectangle which contains the application name and an image.

Currently it looks like this. The vertical alignment of everything being in the centre is exactly what I want. But I want the image to appear on the right of the rectangle (see final screenshot on the post).

enter image description here

The markup for an individual app box looks like this

<div class="apps-container">

   <a href="#">
       <div class="apps-container__app-box">
           <div style="display: flex; align-items: center;">
               <h4>App name</h4>
               <img src="app-logo.svg">
           </div>
       </div>
   </a>

   <!-- Other apps in equivalent .apps-container__app-box -->

</div>

Anywhere on the grey rectangle should be clickable to access the app which is why it’s surrounded with an <a href>. The CSS for that a element contains

display: flex;
align-items: center;

If that CSS is removed then it renders vertically at the top of the box rather than the centre like so.

enter image description here

Inside .apps-container__app-box the app name and image are inside a <div>. I added some inline CSS where I’ve tried various things. Currently it’s set to display: flex; align-items: center; which is the same rules as the parent <a href>. If I remove that inline CSS it goes back to how it’s shown on the second screenshot where the vertical alignment is no longer in the centre.

I took the approach of using a "flexbox inside a flexbox" from How to vertically align text inside a flexbox?

I don’t understand how to do this, or why changing either of these rules is affecting it in the same way. I thought that rules could be used independently, i.e. using the parent <a href> to do the vertical centre and then some other rules on .apps-container__app-box to control the layout of the text and image.

The desired output should look like this:

enter image description here

Can anyone point me in the right direction?

Tags:

2

Answers


  1. 0

    I think the CSS/style you need is:

    justify-content: space-between

    But in order to see the changes clearly reflected you would need the div to have a width, for example, 200px.

    Login or Signup to reply.
  2. 0

    You have to set the flex grow on the elements inside the flex container.

    Default flex-grow is 0.

    If you put for example flex: 1 on the h4, it will grow to fill the parent correctly and have your desired behavior.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search