相关疑难解决方法(0)

我必须使用justify-content：center将块居中，使其位于其父div的中心。并且，如果内容超出了需要的宽度，我需要使用overflow-x：scroll，以便所有块都位于同一行。问题是，使用justify-content隐藏了一些起始块：

注意：如果块的数量限制为3或4或更小，我需要将所有内容放在中间。

请通过此链接

.nav-tabs {
        overflow-x: scroll;
        border: 0;
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .nav-tabs .nav-item {
        width: 20%;
        min-width: 198px;
        float: left;
        display: flex;
        align-items: stretch;
        text-align: center;
        margin-bottom: 0;
    }

<ul class="nav nav-tabs" role="tablist">
		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span> …

我正在使用flexbox进行布局div's.当我有很多li's内部div(每个li宽度为100%/ 3)时顶部被切断.所以我在网上搜索,他们说要插入margin: auto内部div.当我这样做时,我遇到了一个新问题.让我演示给你看:

随着margin: auto 不适用:

body, html {
    height:100%;
    margin: 0;
    padding:0;
}
#outerWrapper {
    background-color: aqua;
    height: 100%;
    display: flex;
    justify-content: flex-start; /* This is ignored */
    align-items: center;
    overflow: auto;
    
}

#innerWrapper {
   /* margin:auto; /* If this line is removed, then it does flex-start, but the top is cut off */
    width: 70%;
    list-style-type: none;
    padding: 0;
    
    display: flex;
    flex-direction: row;
    flex-wrap: …

虽然有许多问题要求使用flexbox和垂直居中,但它们似乎都没有考虑到固定位置包装器.考虑以下:

.modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow: auto;
}

.modal-content {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
}

如果您填写.modal-content有足够的内容来引起垂直滚动条,你将只能滚动下来,并在模态的顶部内容将被切断.

演示问题:http://s.codepen.io/graygilmore/debug/3ff624cb89760c3469f286443f1c726a

这可以通过删除fixed属性来解决,但是.modal-wrapper当内容太小而不能导致滚动条时,这只会引发一个不足以跨越高度的新问题.

为什么我可以滚动到模态的底部,但它的顶部会被切断？

我在单个容器 div 中有一个动态数量的 div display: flex。

现在，我希望我的孩子 div 居中，所以我使用justify-content: center. 这适用于少数孩子（蓝色矩形）

但是对于更多的孩子，设置justify-content: center意味着孩子的 div 被推到越来越远的屏幕外（红色矩形）。

屏幕外向右推的孩子仍然可见，因为我可以向右滚动以查看最右边的孩子。

但是向左推到屏幕外的孩子是不可见的，因为我无法向左滚动。这是个问题。

所以基本上我想用它flexbox来居中它的孩子，但防止孩子被推离屏幕到左边。相反，内容应该向右溢出，这是justify-content: flux-start有效的方式，但仍应居中。

我正在尝试水平对齐一些元素。当元素很少时，我希望它们位于中心。这是有很多的地方，我想要一个水平滚动。

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

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

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

例子：

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

我有一个包含两个项目的简单 flexbox 布局；一种流体宽度，另一种固定。当流体项目包含比自身宽/高的子项时，这会导致页面滚动，而不是流体项目本身。

我已经尝试了一些类似问题的解决方案，但似乎没有一个对我有用。作为一个没有经常使用 flexbox 的人，我觉得我错过了一些明显的东西......

编辑：

添加overflow:auto以.main修复滚动，谢谢。然而我的例子被简化了一些；我还尝试使用 flexboxalign-items和justify-content. 应用此选项后，main元素将不可滚动。

编辑 2

我margin:auto在无法滚动到容器溢出的 flex 项目顶部指定的子项目上使用了技巧来解决第二个问题。

* {
	margin: 0;
}

html, body {
	height: 100%;
}

.container {
	display: flex;
	height: 100%;
}

.main {
	flex: 1;
	height: 100%;
	background: green;
        overflow: auto;
  
        display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar {
	flex: 0 0 200px;
	background: blue;
	height: 100%;
}

.item {
	width: 2000px;
	height: …

我input在 CSS 网格容器内有一个元素。容器应该是 100 像素宽，input元素占据大部分空间，一个other-thing占据剩余的 24像素。我正在grid-template-columns为此使用。

如果我将父容器设置为 200 像素而不是 100 像素，这可以正常工作：

.container {
  grid-template-columns: 1fr 24px;
  grid-template-rows: 1fr;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 200px; /* Try 100px */
  background-color: red;
}

以及以下 HTML

<div class="container">
  <input value="hello"/>
  <div class="other-thing">
    x
  </div>
</div>

但是如果我将容器设置为 100px 宽，输入会突然拒绝缩小 - 所以它与红色容器重叠。

我知道input元素有一个用户样式表，但我看不到任何与宽度或显示相关的内容，我应该覆盖。

这是一个jsfiddle

如何input仅使用容器中的剩余空间，最好使用grid-template-columns？

justify-content: space-around当内容溢出flex容器时，Chrome似乎无法正确处理，并且该容器未设置为允许换行，而是水平滚动。

一些内容在flex容器的左侧溢出，并被截断。我希望它在右侧溢出，以便可以通过水平滚动来到达它。

这是一个例子：

#container {
  display: flex;
  width: 500px;
  justify-content: space-around;
  border: solid black;
  overflow: auto;
}
.item {
  min-width: 200px;
  margin: 10px;
  background-color: red;
  display: table;
  font-size: 48pt;
  text-align: center;
}

<div id="container">
  <div class="item">1</div><div class="item">2</div>
  <div class="item">3</div><div class="item">4</div>
  <div class="item">5</div><div class="item">6</div>
</div>

我有一个<div>垂直居中与以下CSS：

.v-centered {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

只要它的高度（这是事先未知的）就可以了，如果它太小，则不会导致其平移将其推离屏幕顶部。

我有一些JavaScript（使用jQuery）来减轻这种情况：

var $myDiv = $('#myDiv'),
    paddingTop = parseInt($('html').css('padding-top'));

window.onresize = () => {
    if ($myDiv.is('.v-centered')) {
        if ($myDiv.position().top < paddingTop) {
            $myDiv.removeClass('v-centered');
        }
    } else {
        if ($myDiv.height() < document.body.offsetHeight) {
            $myDiv.addClass('v-centered');
        }
    }
}

但是，这有点丑陋，并且在调整窗口大小的范围内，它相当慢。我会喜欢纯CSS / HTML的方法，否则window.onresize，它不会执行太多的计算。

jsFiddle

我终于开始尝试为我的新设计尝试 flexbox，因为它最终可以解决古老的问题，你如何在屏幕上垂直居中一堆文本......结果却发现，这并不像我想象的那么容易.

如果内容高于容器，则内容的顶部实际上将被隐藏并且无法通过滚动访问。Chrome 和 Firefox 的行为是相同的。我创建了一个 Codepen 演示来重现这个问题：http ://codepen.io/perrin4869/pen/LGKOwy

该演示包含 3 种不同的垂直居中内容方法。无论是transform: translateX(-50%)和display: flex方法的行为完全一致，表法作品几乎我怎么指望它的工作，与来自实际使用的缺点display: table。

编辑：问题是，有没有办法让溢出的flexbox行为类似于display: table示例中的溢出？