Question

我正在寻找一种方便的方法，可以在jQuery的帮助下将长的flexbox div转换成多个页面。

<body>
  <div class="flexbox">
    dynamic amount of differently sized elements
  </div>
</body>

请注意，flexbox的动态宽度取决于浏览器窗口的宽度。

Answer 1

我为你准备了一个小演示。给容器一个flex展示似乎没有任何成就，所以我从我的演示中删除了它。该演示通过围绕一堆class HeaderTableViewCell1: UITableViewCell { @IBOutlet weak var _lblTotalCount: UILabel! @IBOutlet weak var _btnExpand: UIButton! @IBOutlet weak var _lblGroupName: UILabel! } class HeaderTableViewCell2: UITableViewCell { @IBOutlet weak var _lblTotalCount: UILabel! @IBOutlet weak var _btnExpand: UIButton! @IBOutlet weak var _lblGroupName: UILabel! }元素移动active类来实现，每个元素代表您假设应用中的一个页面。 CSS否定规则隐藏了不包含<section>类的所有<section>。

＆＃13;

active

＆＃13;

var button          = document.querySelector('button'),
    btnClickHandler = function() {  
      var activePage     = document.getElementsByClassName('active')[0],
          getNextSibling = function getNextSibling(el) {
            var nextSibling = el.nextSibling;
            
            while (nextSibling && nextSibling.nodeType !== 1) {
              nextSibling = nextSibling.nextSibling
            }
            
            if (nextSibling === null)  {
              nextSibling = document.querySelector('.container section:nth-of-type(1)');
            }
            
            return nextSibling;
          },
          nextPage      = getNextSibling(activePage);
      
      activePage.classList.remove('active');
      nextPage.classList.add('active');
    };

button.addEventListener('click', btnClickHandler)

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Karla);

body, button {
  font-family: 'Karla', sans-serif;  
}

.container {
  margin-bottom: 1em;
  min-height: 100px;
}

.container section {
  padding: 1.5em;
  transition: 0.5s;
  will-change: transform;
  transform: translateY(0);
  box-shadow: 0 6px 15px -2px rgba(0, 0, 0, 0.3);
}

.container section:nth-of-type(1) {
  background: rgba(255, 0, 0, 0.5);
}

.container section:nth-of-type(2) {
  background: rgba(0, 255, 0, 0.5);
}

.container section:nth-of-type(3) {
  background: rgba(0, 0, 255, 0.5);
}

.container section:not(.active) {
  visibility: hidden;
  position: absolute;
  top: 0;
  opacity: 0;
  transform: translateY(-10em);
}

button {
  margin: 0 auto 1em;
  text-align: center;
  display: block;
  background: rgba(0,0,0,.7);
  border-radius: 28px;
  border: none;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  box-shadow: 0 17px 10px -10px rgba(0, 0, 0, 0.35);
  transition: 0.3s;
  cursor: pointer;
  will-change: transform, box-shadow;
}

button:hover {
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 27px 14px -14px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

h1 {
  margin-top: 0;
}

* section :last-of-type {
  margin-bottom: 0;
}

＆＃13;

将flexbox内容动态划分为页面

1 个答案: