Flex-box css help

hargi · 23 Sep 2015 at 20:02

Looking for some help I have borrowed some code that takes an image and scales it nicely and puts it in a circle. I am using flex container to put them nicely on the page. However I would like to add a caption under each photo. I am struggling to do this.
code pen http://codepen.io/anon/pen/MajpVv

Code:

<div class="flexcontainer">
<div class="thumbnail">
  <img class="portrait circle-img" src="http://www.fillmurray.com/150/150" alt="" /> <figcaption class="photocap"> Text under picture.</figcaption></div>
<div class="thumbnail"><img class="portrait circle-img" src="http://www.fillmurray.com/200/300" alt="" /></div>
<div class="thumbnail"><img class="portrait circle-img" src="http://www.fillmurray.com/300/300" alt="" /></div>
 
</div>

Code:

.flexcontainer{
  display: flex;
  justify-content: space-around;
  padding-bottom: 5px;
}
.figcaption{
  display:flex;
  flex-direction:row
}
.thumbnail {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #106fb8;


}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}
.circle-img {
  border-radius: 50%;
}

AHarvey · 23 Sep 2015 at 20:20

I've not used flex so no idea, but two things that stand out.

You are using .figcaption, however the class you've assigned to the tag is photocap which has no css.

The other is that the caption is appearing beneath the img so you need to figure a way of dropping it below. If I get time I'll keep playing around with it.

EDIT: You're also missing a ; on line 8

hargi · 23 Sep 2015 at 20:34

Cheers AHarvey
I tried targeting it with figcaption and also the class photocap to but no luck.
It seams to be stuck behind the photo.

All I am trying to do is make a employer section on the site with their photo and there name underneath that responsive ( it doesn't even have to be circular if that's a big problem)

AHarvey · 23 Sep 2015 at 21:00

try this:

Code:

<div class="flexcontainer">
    <figure>
      <img class="portrait circle-img thumbnail" src="http://www.fillmurray.com/150/150" alt="" />
      <figcaption class="photocap"> Text under picture.</figcaption>
  </figure>
  <div class="thumbnail"><img class="portrait circle-img" src="http://www.fillmurray.com/200/300" alt="" /></div>
  <div class="thumbnail"><img class="portrait circle-img" src="http://www.fillmurray.com/300/300" alt="" /></div>

</div>

hargi · 23 Sep 2015 at 21:39

Thank you. That looks to work

kaku · 23 Sep 2015 at 22:33

Surely setting absolute width/height values for the image containers goes against the point of using a flex-based layout?

Regardless, I recently completed a project at work using flexbox and I found the following website extremely useful for visualising flex behaviour: http://the-echoplex.net/flexyboxes/

hargi · 24 Sep 2015 at 07:24

Kaku ,
This is the first time I have used it and I may be using it wrong. The height and width are set on the image container as I have loads of photos that I wanted to centre and trim with Css rather then manually in Photoshop.
The flex was just to lay them out on the page

kaku · 24 Sep 2015 at 16:36

The common use-case for flexbox is when the content inside the containers is variable (eg. loaded dynamically or something like that).

From what I gather you're trying to make a 'card'-style layout, with content that is already a known quantity. In this case I would use inline-block display type to arrange the card elements like this: http://codepen.io/anon/pen/merKpr

You can see how the 'cards' wrap around and arrange when you add or remove them or change the width of the screen.

I understand what you are saying about the profile images. Bear in mind the performance cost (there's no point in making the user download a huge-resolution photo only to clip out a small portion of it) and that if the subject isn't actually centered in the image it probably won't look quite right (you can see it in the filler pictures).

You will need to change quite a lot to make it truly 'responsive', but I hope it explained the idea behind it.