7

I'm trying to align some elements horizontally. When there is few elements, I want they are on center. This is where there is many, I want a horizontal scroll.

But there is a problem, the first and second elements are hidden.

.container {
    display: flex;
    flex-direction: row;
    justify-content: center ;
    overflow: scroll;
}

item {
      width: 440px ;
      height: 240px;
      flex-shrink: 0;
}

Example:

.projets {
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow: scroll;
}

.projets .projet_outter {
  width: 440px;
  height: 240px;
  flex-shrink: 0;
}

.projets .projet {
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  background-color: white;
  width: 400px;
  height: 200px;
  margin: 20px auto;
}

.projets .projet .num {
  margin: 0px auto;
  background-color: #005FB9;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: white;
  vertical-align: middle;
  text-align: center;
  transform: translateY(-50%);
}
<div class="projets">
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        1
      </div>
      projet aez
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        2
      </div>
      projet
    </div>
  </div>

  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        3
      </div>
      projet
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        4
      </div>
      projet
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        5
      </div>
      projet
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        6
      </div>
      projet
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        7
      </div>
      projet
    </div>
  </div>

</div>

https://codepen.io/alexandrepetrillo/pen/prBpOQ

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Alexandre Petrillo
  • 103
  • 1
  • 6
  • Not possible with CSS. CSS can't detect overflow. – Paulie_D Sep 05 '17 at 16:20
  • You have to change `justify-content: center;` to `justify-content: start;`. – Schwesi Sep 05 '17 at 16:23
  • @Paulie_D possible to fake it : https://codepen.io/gc-nomade/pen/EvJQaV/ items get centered when possible ;) – G-Cyrillus Sep 05 '17 at 16:28
  • 1
    This is a known issue with flexbox. It's explained in the duplicate. – Michael Benjamin Sep 05 '17 at 18:01
  • The other issue is a text alignment with line breaks, this is with blocks of defined sizes, they can be treated in different ways, the other post did not solve my problem, this one fit perfectly. I would not put it as a duplicate. – KevynTD Aug 05 '20 at 07:23
  • I found another way to solve this problem without using flexbox: https://jsfiddle.net/Byte/x4gbem2p/ – KevynTD Aug 05 '20 at 07:26

3 Answers3

23

You need a work around via pseudos to simulate justify-content:center; when it should show:

remove : justify-content:center;

and add 

&::before , 
    &::after {
      content:'';
      flex:1;
    }


.projets {
  display: flex;
  flex-direction: row;
  overflow: scroll;
}

.projets::before,
.projets::after {
  content: '';
  flex: 1;
}

.projets .projet_outter {
  width: 440px;
  height: 240px;
  flex-shrink: 0;
}

.projets .projet {
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  background-color: white;
  width: 400px;
  height: 200px;
  margin: 20px auto;
}

.projets .projet .num {
  margin: 0px auto;
  background-color: #005FB9;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: white;
  vertical-align: middle;
  text-align: center;
  transform: translateY(-50%);
}
<div class="projets">

  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        1
      </div>
      projet aez
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        2
      </div>
      projet
    </div>
  </div>
</div>
<hr/>

<div class="projets">

  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        1
      </div>
      projet aez
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        2
      </div>
      projet
    </div>
  </div>

  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        3
      </div>
      projet
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        4
      </div>
      projet
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        5
      </div>
      projet
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        6
      </div>
      projet
    </div>
  </div>
  <div class="projet_outter">
    <div class="projet">
      <div class="num">
        7
      </div>
      projet
    </div>
  </div>

</div>

https://codepen.io/anon/pen/EvJQaV

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • 1
    Is there a way to do this, where the scrollable section is still centered? In this example they are left-aligned / flex-start. – bplittle Jun 12 '20 at 21:10
  • @bplittle it looks centered while children do not fill the entire row (codepen demo). i'm not sure i understand unless it is about your browseer ? or do you mean something alike https://codepen.io/gc-nomade/pen/RwrazLo ? – G-Cyrillus Jun 12 '20 at 21:12
  • It works and I can continue using my normal flexbox, you were brilliant, congratulations on the solution!! – KevynTD Aug 05 '20 at 07:36
  • I think @bplittle means that the item 4 will be aligned in the middle when the scroll starts. bplittle you can do this using JS, for now only with CSS I don't think you can do that.You can use this ones: to get position of scroll: element.scrollTop, element.scrollLeft; Get size of scroll: element.offsetHeight, element.offsetWidth; set function to detect changes on window size: window.onresize; – KevynTD Aug 05 '20 at 07:47
  • Very clever; beats using JS! – Kalnode Mar 04 '21 at 16:54
0

You can use 

display: flex;
flex-direction: row;
justify-content: space-around;
overflow: auto;

P.S: Awesome website to play and learn with Flex (http://flexbox.help/)

rootkill
  • 599
  • 5
  • 10
  • 1
    I feel as though this comment is underrated. I had a similar centering issue with an overflow element that is working perfectly by reassigning the flex direction and using the "justify-content: space-around;" property. – mdurchholz Feb 23 '22 at 18:11
  • I tried it on the initially shared codepen but it doesn't work. Thus, I'm downvoting this since it doesn't answer the original question. – Chaoste Aug 16 '23 at 09:34
-1

1) remove justify-content: center;

2) add .projets .projet_outter{margin: 0 auto;}

Dmytro Lishtvan
  • 788
  • 7
  • 12