widths and centering with flexbox

Question

I am trying to create a sort of text carousel. Heres a sketch of what I want to do:

I have a card and I might have multiple of them. If there's one I just need it to be neatly centered both vertically and horizontally. If there's two then try to put them next to one another. But if there's more than there can be fit on the screen, then I just want the last one to overflow off

All the cards need to retain the same size

This is what I have tried:

Firstly I tried using align-items: flex-start http://jsfiddle.net/7pdmeh6v/

This works with the logic but the problems are that if I had one item it wouldn't be centered and here I can't change the width.

Secondly I tried using align-items: center http://jsfiddle.net/hr8ya9fg/

Logic works but This cuts off the top of the cards and also doesn't let me change the size of the cards.

Thirdly I removed align-items and just left justify-content: center http://jsfiddle.net/6hdzamq5/

which works with the logic but still doesn't let me change the size of the cards AND also I noticed here that it completely disregards margins and paddings

TLDR: Flex-box doesn't seem to let me edit the size on any occasion without another problem occurring.

score 1 · Answer 1 · answered Oct 27 '18 at 17:38

I'd suggest you looking into flex property which is a shorthand for flex-shrink, flex-grow and flex-basis properties. It would help you to define behavior of your flex-items. (https://www.w3schools.com/cssref/css3_pr_flex.asp)

See the snippet below:

#container {
  display: flex;
  margin: 10px;
  height: 180px;
  overflow: auto;
  border: 3px solid;
}

.box {
  flex: 0 0 320px;
  margin: 10px;
  background: #9a6;
  border: 1px solid;
  color: #000;
  padding: 10px;
}

<div id="container">
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
</div>

score 1 · Accepted Answer · answered Oct 27 '18 at 17:56

A couple of initial observations:

In a row-direction flex container, which is what you're using, the align-* properties control vertical, not horizontal, space and positioning. So I'm not sure how you plan to solve your horizontal scroll problem using align-items.
The initial value of the flex-shrink property is 1. This means that flex items will shrink in order to stay within the bounds of the container. So when you tell your flex items to be width: 500px, that is not a fixed length. The items can shrink. Add flex-shrink: 0 to disable flex shrink and make the items inflexible.

.container {
  display: flex;
  height: 240px;
  overflow: auto;
  margin: 10px;
  padding: 10px;
  border: 3px solid #000;
}

.box {
  width: 500px;
  flex-shrink: 0; /* toggle between 1 and 0 to see the differences */
  background-color: red;
  border: 1px solid #000;
  color: #000;
  padding: 10px;
}

.box {
  margin-left: auto;
  margin-right: auto;
}

.box ~ .box {
  margin-left: 10px;
}

<div class="container">
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
</div>

<div class="container">
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
</div>

<div class="container">
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
</div>

You'll notice that the last margin / padding collapses. That issue is explained here:

Last margin / padding collapsing in flexbox / grid layout

widths and centering with flexbox

2 Answers2