長いflexboxのdivを複数のページに変換する便利な方法を探しています。これはおそらくjQueryの助けを借りて行います。フレックスボックスのコンテンツをページに動的に分割する
<body>
<div class="flexbox">
dynamic amount of differently sized elements
</div>
</body>
フレックスボックスの幅は、ブラウザウィンドウの幅に基づいています。
少しデモをまとめました。コンテナにフレックスディスプレイを付けることは何も成し遂げられなかったので、私はそれをデモから削除しました。このデモはactiveクラスを<section>要素の束の周りに移動させることで動作します。各要素は仮説アプリのページを表します。 CSS否定ルールは、activeクラスを含まない<section>をすべて隠します。
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)@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;
}<div class="container" id="page-container">
<section class="active">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum perferendis culpa harum nobis illum eos inventore architecto sequi dolorem. Laboriosam non nam sequi tenetur dicta! Numquam optio perspiciatis, consequatur?</p>
</section>
<section>
<h1>Page 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum perferendis culpa harum nobis illum eos inventore architecto sequi dolorem. Laboriosam non nam sequi tenetur dicta! Numquam optio perspiciatis, consequatur?</p>
</section>
<section>
<h1>Page 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum perferendis culpa harum nobis illum eos inventore architecto sequi dolorem. Laboriosam non nam sequi tenetur dicta! Numquam optio perspiciatis, consequatur?</p></section>
</div>
<button aria-controls="page-container">
Change page
</button>
あなたの答えをありがとうそれは私がコードとそのウォン」を書くとき、私はコンテンツの量や内容の大きさを知ることができませんとして探しているものをイムかなりありませんそれをセクションに分けることができます。とにかく素晴らしいデモのためにありがとう:) – Gurgy
正確に何を求めているかは、この時点では不可能です。 –