flexbox 的宽度和居中

Question

我正在尝试创建一种文本轮播。这是我想要做的草图：

我有一张卡，我可能有多张。如果有 one 我只需要它在垂直和水平方向上都整齐地居中。如果有两个，则尝试将它们并排放置。但是如果屏幕放不下，那么我只希望最后一个溢出关闭

所有的卡片需要保持相同的大小

这是我试过的：

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

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

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

逻辑可行但这切断了卡片的顶部，也不让我改变卡片的大小。

第三次我删除了align-items然后就离开了justify-content: centerhttp://jsfiddle.net/6hdzamq5/

这符合逻辑，但仍然不允许我更改卡片的大小而且我还注意到这里它完全无视边距和填充

TLDR: Flex-box 似乎不允许我在任何情况下编辑尺寸而不会出现其他问题。

Answer 1

我建议您查看 flex 属性，它是 flex-shrink、flex-grow 和 flex-basis 属性的 shorthand。它将帮助您定义弹性项目的行为。 (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-* 属性控制垂直而非水平，space 和定位。所以我不确定您打算如何使用 align-items.
flex-shrink属性的初始值为1。这意味着弹性项目将收缩以保持在容器的边界内。所以当你告诉你的 flex 项目是 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

flexbox 的宽度和居中

widths and centering with flexbox

html

css

centering

flexbox