相关疑难解决方法(0)

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源:W3C}

要沿主轴对齐flex项,有一个属性:

• justify-content

要沿横轴对齐flex项,有三个属性:

• align-content
• align-items
• align-self

在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.

但是,这些方向可以很容易地与flex-direction财产互换.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴始终垂直于主轴.)

我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.

那么为什么横轴有两个额外的对齐属性呢？

为什么align-content并且align-items合并为主轴的一个属性？

为什么主轴没有justify-self属性？

这些属性有用的场景:

• 将flex项放在flex容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 制作一组flex项目align-right(justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)

  考虑带有一组导航项和徽标的标题部分.随着justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.

• 在一排三个柔性物品中,将中间物品粘贴到容器的中心(justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …

我的布局有一个容器flex-container和一个孩子.

HTML:

<div class="flex-container">
  <div>text</div>
</div>

容器和孩子的身高不明.目标是:

• 如果孩子的高度低于容器,则它看起来水平和垂直居中.
• 如果孩子的高度高于容器,它会调整到顶部和底部,我们可以滚动.

方案:

使用flexbox对元素进行居中的最快方法如下:

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi …

我有一个容器是整个窗口的高度/宽度.在这个容器里面,我想要一个垂直和水平居中的表格.下面,我还想在容器的底部基线上打印一份副本.类似于下面的蹩脚插图.现在我只能让它们都垂直居中,并且找不到一个很好的方法将底部复制引脚本身放到容器的底部.

---------
|       |
|       |
|<form> |
|       |
|<copy> |
---------

.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  padding: 1em;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

form {
  
}

.bot {
  align-self: flex-end;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
   </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p> …

我已经看到,在开发网站,随机高度的容器内垂直居中(固定的高度)的容器总是作为Web开发人员的噩梦,而当涉及到水平中心位置的容器(的(至少我)固定宽度)随机宽度的容器内,margin:0px auto;往往在标准模型中提供一个简单的方法.

当事情可以如此简单时,为什么CSS不能解决margin:auto 0px;当将固定高度的容器集中在随机高度的容器内时？有没有具体的理由这样做？感谢您提前获得的见解.

HTML:

<div id="container">
    <div class="item">Foo</div>
    <div class="item">Bar</div>
</div>

CSS:

#container {
    display: flex;
    justify-content: center;
    overflow: auto;
}
.item {
    flex-grow: 1;
    min-width: 200px;
    max-width: 300px;
}

当上述容器缩小到小于400px时,会出现预期的水平滚动条.但是,即使向左滚动,第一个项目也会被容器的左边缘部分遮挡.随着容器缩小,更多的物品被遮挡.

演示:http://jsfiddle.net/FTKcQ/.调整结果框的大小以进行观察.在Chrome 30和Firefox 24中测试过.

如果justify-content从center更改为任何其他值(例如space-between),则通过滚动可以看到所有内容.为什么居中的项目表现不同？

这里的目标是有一排居中的项目,每个项目的宽度将在某个范围之间增长.如果容器无法容纳所有最小宽度的项目,则应滚动以显示所有这些项目.

要使用flexbox垂直和水平居中div,我只需将这些规则应用于它的父级

display: flex;
align-items: center;
justify-content: center;

所以它会像这样显示:

然而,当div中有更多内容时,视口中有高度,它会使内容溢出网页,使其不可见,并且无法向上滚动,如下所示:jsfiddle.net/xk1z6wpa/2

我需要div从顶部不溢出网页,而是在到达之前停止,因此只会从底部溢出 - 所以:

我怎么能做到这一点？

我必须忘记我的垂直和水平居中的flexbox的基本内容.

容器位于具有垂直滚动的父级内,当容器变得太高时,它会超出父级顶部,剪切内容.底部保持不变.

尝试调整视图的高度或添加更多行以查看其运行情况.

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

#wrapper {
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  display: flex;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}

#box {
  margin: 30px 0;
  background: white;
  border: 1px solid #dfdfdf;
}

<div id="wrapper">
  <div id="box">
    First line
    <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
  </div>
</div>

如何防止它被剪裁？另外,我试图在容器上方和下方有30px的边距.

谢谢!

我在 Flex 父容器上使用 Overflow-x:scroll 和 justify-content:center 时遇到问题。请参阅下面我的代码。

问题：第一个 Flex 子项目未显示它在左侧或其他所有子项目中裁剪。请参阅下面的屏幕截图和代码。

我需要你的帮助。先感谢您。

.container {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  overflow-x: scroll;
}

.box {
  height: 100px;
  border: 1px solid red;
  min-width: 100px;
  margin-right: 10px;
  flex-grow: 1;
}

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

要同时水平和垂直居中,有两个简单的选项:

第一

.outer {
  display:flex;
}
.inner {
  margin:auto;
}

第二

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

有什么不同？在什么情况下我们会使用一个而不是另一个？

当中心的flexbox项目溢出其容器时,它们可能会产生不良行为.

已经针对该问题提供了几种非灵活的解决方案,但是根据MDN,存在safe如下所述的值.

如果项目的大小溢出对齐容器,则项目将对齐,就像对齐模式开始一样.

它可以如下使用.

align-items: safe center;

不幸的是,我无法找到任何关于此的示例或讨论,或者确定它有多少浏览器支持.

我试图safe 在此CodePen中使用.但是,它对我不起作用.本safe似乎被忽略,或者容器元素是不正确的风格.

如果有人能够阐明safe它是否可以用于解决溢出问题,我会非常感激,如CodePen示例所示.