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

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

我最近在这个和这个问题中提出了这个问题,并且感谢@ 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", "");
  } …

我连续有3个按钮,宽度各不相同.我希望它们都能获得相同的宽度以填充行的剩余宽度,因此最宽的仍将比其他宽度更宽等.

你可以在下面看到我尝试用flex做的事情导致所有按钮的宽度相同.我知道flex-grow可以用来按比例增长每个项目,但我无法弄清楚如何让它们与原始大小相关.

您可以在第二行中看到蓝色项目大于其他两个项目.我只想让所有三个人从他们当前的大小平均扩大到填充行.

谢谢

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: 1;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large …

假设我有3个水平显示的div flexbox:

 |     |-div1-| |-center-div-| |-wider-div-|     |

我希望中心div与父级的中间对齐.我怎么能做到这一点？justify-content将基于所有宽度的总和居中所有3个div,并且应用于align-self: center中间div不会做任何事情,因为align属性操纵另一个轴上的定位.

是否有响应式CSS解决方案,还是应该使用jQuery？

ul {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: purple;
}
li {
    background-color: red;
    border: 5px solid blue;
    list-style: none;
}

<ul>
    <li><a href = "#">short</a></li>
    <li><a href = "#">want center</a></li>
    <li><a href = "#">loooooooooooooooooong</a></li>
</ul>

这个问题的插图:https: //jsfiddle.net/7w8mp8Lj/2/

我知道flexbox为居中项提供了一个很好的解决方案。但是，当我有3个项目并且无论其他2个项目的大小如何，我都希望中心（第二个）项目相对于窗口居中时，我遇到了一个问题。

在我的笔中，您可以看到第二个项目“客户索引”偏离中心，因为右侧的内容大于左侧的内容。 我如何强迫它居中？

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

<div class="flex">
  <span style="font-size:12px;">small</span>
  <span style="font-size:20px;">Client Index</span>
  <span style="font-size:18px;">Lots of content that moves the center</span>
</div>

我的Codepen

我有一个弹性盒（请参阅下面的代码片段作为示例）。

我想设置它，以便在所有情况下，它都位于弹性盒<h2>的中心，其他跨度将根据它们的标记围绕它流动。

.container {\n  align-items: center;\n  border: 1px solid red;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\nh2 {\n  margin: auto;\n]

<div class="container">\n  <h2>I\'m an h2</h2>\n  <span>I\'m span 1</span>\n  <span>I\'m span 2</span>\n  <span>I\'m span 3</span>\n</div>\n<div class="container">\n  <span>I\'m span 1</span>\n  <span>I\'m span 2</span>\n  <span>I\'m span 3</span>\n  <h2>I\'m an h2</h2>\n  <span>I\'m span 4</span>\n  <span>I\'m span 5</span>\n  <span>I\'m span 6</span>\n</div>\n<div …