flexbox的宽度和居中

Question

我正在尝试创建一种文本轮播。 以下是我要执行的操作的草图：

我有一张卡，我可能有多张。 如果有一个，我只需要将其垂直和水平居中对齐即可。 如果有两个，请尝试将它们并排放置。 但是，如果屏幕上显示的内容不胜枚举，那么我只希望最后一个溢出关闭

所有卡都必须保持相同大小

这是我尝试过的：

首先，我尝试使用align-items: flex-start  http://jsfiddle.net/7pdmeh6v/

这符合逻辑，但问题是，如果我有一项，它就不会居中，在这里我也无法更改宽度。

其次我尝试使用align-items: center  http://jsfiddle.net/hr8ya9fg/

逻辑工作但  这切断了卡片的顶部，也不允许我进行更改  卡的大小。

第三次，我删除了align-items并离开了justify-content: center http://jsfiddle.net/6hdzamq5/

这符合逻辑，但仍然不允许我更改纸牌的大小，而且我在这里还注意到，它完全忽略了边距和填充

TLDR：  在没有其他问题发生的情况下，Flex-box似乎无法让我随时编辑尺寸。

Answer 1

我建议您研究flex属性，它是flex-shrink，flex-grow和flex-basis属性的简写。这将帮助您定义弹性项目的行为。 （https://www.w3schools.com/cssref/css3_pr_flex.asp）

请参见下面的代码段

#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>

Answer 2

一些初步发现：

• 在您正在使用的行方向伸缩容器中，align-*属性控制垂直而非水平的空间和位置。因此，我不确定您打算如何使用align-items解决水平滚动问题。

• flex-shrink属性的初始值为1。这意味着弹性项目将收缩以保留在容器的范围内。因此，当您将弹性项目指定为width: 500px时，这不是固定长度。物品会收缩。添加flex-shrink: 0以禁用弹性收缩并使项目不灵活。

.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>

您会注意到最后一个边距/填充折叠。该问题的解释如下：

• Last margin / padding collapsing in flexbox / grid layout