相关疑难解决方法(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 …

想象一下以下布局,其中圆点表示框之间的空间:

[Left box]......[Center box]......[Right box]

当我移除右边的盒子时,我喜欢中心盒仍然位于中心,如下所示:

[Left box]......[Center box].................

如果我删除左框也是如此.

................[Center box].................

现在,当中心框内的内容变得更长时,它将占用尽可能多的可用空间,同时保持居中.左边和右边框将永远不会收缩,因此当没有剩余空间的地方overflow:hidden,并text-overflow: ellipsis会在效果打破了内容;

[Left box][Center boxxxxxxxxxxxxx][Right box]

以上都是我理想的情况,但我不知道如何实现这个效果.因为当我创建一个像这样的flex结构时:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

如果左右框的大小完全相同,我会得到所需的效果.然而,当两者中的一个来自不同尺寸时,居中的盒子不再真正居中.

有没有人可以帮助我？

更新

A justify-self会很好,这将是理想的:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

我想有A B和C中间对齐.

我怎样才能D完全走向正确？

之前:

后:

这样做的最佳做法是什么？

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  /* magic to throw to the right*/
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

https://jsfiddle.net/z44p7bsx/

我一直在阅读灵活盒子,以解决我一直遇到的问题.我读过/用作问题研究的主要文章就是这个.

我最近在这个和这个问题中提出了这个问题,并且感谢@ Michael_B的帮助,<h2>只要总是只有三个flex ,就会解决如何将一个元素(在本例中为一个)置于一个flex-box 中心的问题.弹性框中的-items(在此布局中:) <div><h2><div>.

我想扩展这些要点,因为我意识到可能有一个解决方案可以解决,如果有更多或(更实际)少于3个灵活项目.

它涉及使用边距.如果您margin: auto;在弹性项目上使用它,它会将一个项目居中放在主轴上(有关弹性框的工作原理,请参见下图).

img {
 width: 100%;
 height: 100%;
}

<img src="http://i.stack.imgur.com/9Oxw7.png" alt="flex-box demo" />

(这是我弄清楚如何获得下拉照片的最佳方式......)

根据我的理解,使用margin: auto是align-self横轴的属性的当前对应物.

因此,可以通过以下方式将Flex项目置于Flex框中:

$(document).on('click', 'button', function(e) {
  $this = $(this);
  if ($this.attr('id') === 'button1') {
    $('h2').parent().attr("class", "");
    $('h2').attr("class", "toggle1");
  }
  if ($this.attr('id') === 'button2') {
    $('h2').parent().attr("class", "");
    $('h2').attr("class", "toggle1");
  }
  if ($this.attr('id') === 'button3') {
    $('h2').parent().attr("class", "toggle3");
    $('h2').attr("class", "");
  } …