CODEWITHSUNDEEP
javascripthtmlcss
m0bi5
m0bi5

Reputation: 9475

Display flex items in a row

I have the following template populated dynamically by Django

<div class="center row">
    <h3><span>The Core</span></h3>
    {% for member in core %}
    <a class="core_img " href="#">
        <div class="img__overlay">
            {{member.user.first_name}} {{member.user.last_name}}
            <br>
            {{member.role}}
        </div>
        <img src='media/{{member.user.avatar}}'>
    </a>
    {% endfor %}
</div>

This is the accompanying CSS

.core_img {
  border-radius: 100%;
  display: flex;
  flex: 0 0 150px;
  height: 150px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-direction: row;
  width: 150px;
}

.core_img img {
  height: 100%;
}

.img__overlay {
  align-items: center;
  flex-direction: row;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.25s;
  z-index: 1;
}
.img__overlay:hover {
  opacity: 1;
}

.img__overlay {
  background-color: rgba(26,35,126,0.8);
  color: #fafafa;
  font-size: 15px;
}

As of now, the images are getting displayed one below the other enter image description here

I would like it to be displayed one beside the other, how should I go about it?

Upvotes: 1

Views: 149

Answers (4)

adel
adel

Reputation: 3507

just change .core_img{display:flex} to inlin-flex and to remove space between the image i added font-size:0 to parent .row 

.row{
    font-size:0;
}
.core_img {
  border-radius: 100%;
  display: inline-flex;
  flex: 0 0 150px;
  height: 150px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-direction: row;
  width: 150px;
}

.core_img img {
  height: 100%;
}

.img__overlay {
  align-items: center;
  flex-direction: row;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.25s;
  z-index: 1;
}
.img__overlay:hover {
  opacity: 1;
}

.img__overlay {
  background-color: rgba(26,35,126,0.8);
  color: #fafafa;
  font-size: 15px;
}
<div class="center row">
    <h3><span>The Core</span></h3>
    <a class="core_img " href="#">
        <div class="img__overlay">
            <br>
        </div>
        <img src='https://picsum.photos/800'>
    </a>    <a class="core_img " href="#">
        <div class="img__overlay">
            <br>
        </div>
        <img src='https://picsum.photos/800'>
    </a>
</div>

Upvotes: 1

sodimel
sodimel

Reputation: 916

I added a display: flex to your "center row" (renamed center-row) class.

Flexbox are very powerful since you can arrange child elements very easily. Here's a nice cheatsheet that I use daily :)

img{
  background-color: red;
  width: 150px;
}

.core_img {
  border-radius: 100%;
  display: flex;
  flex: 0 0 150px;
  height: 150px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-direction: row;
  width: 150px;
}

.core_img img {
  height: 100%;
}

.img__overlay {
  align-items: center;
  flex-direction: row;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.25s;
  z-index: 1;
}
.img__overlay:hover {
  opacity: 1;
}

.img__overlay {
  background-color: rgba(26,35,126,0.8);
  color: #fafafa;
  font-size: 15px;
}

.center-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
<h3><span>The Core</span></h3>

<div class="center-row">
    <a class="core_img " href="#">
        <div class="img__overlay">
            Test1 Test2
            <br>
            css advisor
        </div>
        <img src=''>
    </a>
    
    <a class="core_img " href="#">
        <div class="img__overlay">
            Test1 Test2
            <br>
            css advisor
        </div>
        <img src=''>
    </a>
</div>

Upvotes: 2

ConfusedCopyPaster
ConfusedCopyPaster

Reputation: 123

I needed to re-write your script since I didn't have any dynamic data. You'll be able to re-factor it to use it in a loop pretty easily.

All I did was add a .wrapper underneath your .row and gave it display: flex; flex-direction: row;.

You could apply these rules to the .row class itself, but then your title would be sitting inline with your images, which I imagine you don't want.

HTML:

<div class="center row">
    <h3><span>The Core</span></h3>
    <div class="wrapper">
         <a class="core_img " href="#">
              <div class="img__overlay">
                    Joe Bloggs
                    <br>
                    Developer
              </div>
              <img src='http://unsplash.it/100/100'>
         </a>
        <a class="core_img " href="#">
              <div class="img__overlay">
                    Jake Bloggs
                    <br>
                    Task Master
              </div>
              <img src='http://unsplash.it/100/100'>
         </a>
    </wrapper>
</div>

CSS:

.row{
    display: block;
    margin: 1em auto;
    width: 50vw; // adjust this if you want less of a gap between images
}

h3{
    // you don't need this rule
    text-align: center;
    margin: 1em auto;
}

.wrapper{
    display: flex;
    align-items: center;
    flex-direction: row;
    align-content: space-evenly;
}

.core_img {
  border-radius: 100%;
  display: block;
  height: 150px;
  overflow: hidden;
  position: relative;
  flex-direction: row;
  width: 150px;
  margin: 1% auto; //comment this if you don't want the massive gap between images
}

.core_img img {
  height: 100%;
}

.img__overlay {
  align-items: center;
  flex-direction: row;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.25s;
  z-index: 1;
}
.img__overlay:hover {
  opacity: 1;
}

.img__overlay {
  background-color: rgba(26,35,126,0.8);
  color: #fafafa;
  font-size: 15px;
}

Upvotes: 0

Boky
Boky

Reputation: 12084

If you add div as a wrapper before your for loop as follows:

<div class="center row">
    <h3><span>The Core</span></h3>
    <div class="test"> //////////////// This
    {% for member in core %}
    <a class="core_img " href="#">
        <div class="img__overlay">
            {{member.user.first_name}} {{member.user.last_name}}
            <br>
            {{member.role}}
        </div>
        <img src='media/{{member.user.avatar}}'>
    </a>
    {% endfor %}
    </div>
</div>

And .test class should be as follows:

.test{
    display: flex;
    flex-direction: row;
}

That should do the trick.

Here is the code snippet:

.test{
  display: flex;
  flex-direction: row;
}

.test a {
   margin-right: 5px;
}
<div class="center row">
    <h3><span>The Core</span></h3>
    <div class="test">
      <a class="core_img " href="#">
        <div class="img__overlay">
            Name
            <br>
            admin
        </div>
        <img src='https://via.placeholder.com/150'>
    </a>
    <a class="core_img " href="#">
        <div class="img__overlay">
            Name 2
            <br>
            admin
        </div>
        <img src='https://via.placeholder.com/150'>
    </a>
    </div>
</div>

Upvotes: 3

Related Questions