小编4la*_*kof的帖子

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

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

*注意:以下问题不是针对人们的意见,而是根据网页,jQuery等的最佳处理速度提出的问题.

我目前的代码遵循以下"测试"代码格式:

$(document).ready(function() {
  $('.my-class').on('click') {
    if ($('.my-class').hasClass('active') {
      $('.my-class').removeClass('active');
      return;
    }
    $('.my-class').addClass('active');
  }
});

我的问题是:事件处理程序(不是事件监听器)应该与代码结构相同$(document).ready();吗？或者它应该是这样的:

function toggler(obj) {    
  if ($(obj).hasClass('active') {
    $(obj).removeClass('active');
    return;
  }
  $(obj).addClass('active');
}

$(document).ready(function() {
  $('.my-class').on('click') {
    toggler(this);
  }
});

ie应该$(document).ready();只有引用处理程序的侦听器,或者应该是整个(侦听和处理)动作$(document).ready();

这样做的正确方法是什么,以便最大化jQuery,JS等的可用性/功能.

我目前有以下"扁长影子"(我删除了3/4s的代码,以免崩溃stackoverflow - 在我的文本编辑器中,每个影子自己的行,它来到大约600行代码)我根据Matt Lambert的 教程创建的.

body {
  background-color: #ddd;
}
div {
  min-height: 64px;
  width: 64px;
  text-align: center;
  background-color: cyan;
  border: 1px solid blue;
  box-shadow: #8c8c8c 1px 1px, #8c8c8c 2px 2px, #8c8c8c 3px 3px, #8c8c8c 4px 4px, #8c8c8c 5px 5px, #8c8c8c 6px 6px, #8c8c8c 7px 7px, #8c8c8c 8px 8px, #8c8c8c 9px 9px, #8c8c8c 10px 10px, #8c8c8c 11px 11px, #8c8c8c 12px 12px, #8c8c8c 13px 13px, #8c8c8c 14px 14px, #8c8c8c 15px 15px, #8c8c8c 16px 16px, #8c8c8c 17px 17px, …

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

我想设置它，以便在所有情况下，它都位于弹性盒<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 …