CSS Flex溢出和居中[重复]

Posted 2023-03-05

【中文标题】CSS Flex溢出和居中[重复]

【英文标题】：CSS Flex overflow and center [duplicate]

【发布时间】：2018-02-14 00:15:38

【问题描述】：

我正在尝试水平对齐一些元素。当元素很少时，我希望它们位于中心。这里有很多，我要横向卷轴。

但是有一个问题，第一个和第二个元素被隐藏了。

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


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

例子：

.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

【问题讨论】：

无法使用 CSS。 CSS 无法检测到溢出。

您必须将justify-content: center; 更改为justify-content: start;。

@Paulie_D 可能伪造它：codepen.io/gc-nomade/pen/EvJQaV 项目尽可能居中 ;)

这是 flexbox 的一个已知问题。副本中有解释。

另一个问题是带有换行符的文本对齐，这是定义大小的块，可以用不同的方式处理它们，另一篇文章没有解决我的问题，这个非常适合。我不会把它当作重复的。

【参考方案1】：

您需要通过伪解决方案来模拟 justify-content:center; 何时应该显示：

删除：justify-content:center;

并添加

&::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

【讨论】：

有没有办法做到这一点，可滚动部分仍然居中？在本例中，它们是左对齐 / flex-start。

@bplittle 它看起来居中，而孩子们没有填满整行（codepen 演示）。我不确定我是否理解，除非它与您的浏览器有关？还是你的意思类似codepen.io/gc-nomade/pen/RwrazLo？

它可以工作，我可以继续使用我的普通 flexbox，你太棒了，祝贺你的解决方案！！

我认为@bplittle 的意思是当滚动开始时第4 项会居中对齐。 bplittle 你可以使用 JS 来做到这一点，现在只有 CSS 我不认为你可以做到这一点。你可以使用这些：获取滚动位置：element.scrollTop，element.scrollLeft;获取滚动大小：element.offsetHeight, element.offsetWidth；设置检测窗口大小变化的函数：window.onresize;

非常聪明；使用 JS 节拍！

【参考方案2】：

1) 移除 justify-content: center;

2) 添加.projets .projet_outtermargin: 0 auto;

【讨论】：

谢谢，但不是，因为当只有 2 个元素居中时

【参考方案3】：

你可以使用

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

P.S：很棒的网站，可以玩和学习 Flex (http://flexbox.help/)