2
私は、ウェブで次のような水平レイアウトを達成したいと考えています。ユーザーは垂直スクロールの代わりに水平スクロールを使用します。フレックスボックスを垂直フローで動作させるにはどうすればよいですか？
ソースコードは次のようになります。
<html>
<head><title>Sample</title></head>
<body>
<main>
<section class="cover"></section>
<section>
<h1>Title</h1>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
</div>
</section>
<section>
<h2>Page2</h2>
<img src="someimage.jpg" alt="Some Title">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
</section>
</main>
</body>
</html>
私はそれがdisplay : flexへの主な設定によっては簡単だろうと思った、と私はそこになりますどのように多くの列がわからないので、私はsection pcolumn-width : 600pxと設定します。私はセクションのコンテナが必要なだけの幅になることを望んだが、うまくいかない。縦の流れの内容に応じてコンテナが大きくなるのではなく、小さいままであり、600ピクセル以下になるため、1つの列と残りの内容が流れ落ちます。
コンテンツを表示するのに必要な数の列をユーザーに表示するのが好きで、コンテンツを保持するために必要なだけ幅が拡大するのは親コンテナです。
で
flex-direction: columnを使用することができますあなたの提案された答え。それは、すべての段落を互いに隣り合わせに置いていますが、望ましい動作は、段落を下にしてその隣の新しい列で続けるまでは、段落をすべて下に置く必要があるということです。しかし、おそらくそれは良い方向のポイントです。 – Mark問題はCSSカラムの幅が理想的ですが、幅だけを見て必要なカラムを自動的に計算しようとしていることです。しかし、もし私がそれを列の高さと列の幅を与えることができればより良いでしょう。したがって、列幅の幅を使用して列高さの高さに列を塗りつぶします。最後に達すると、column-widthとcolumn-heightのある別の列が追加されます。 – Mark
私はCSSリージョンも見ましたが、フォアハンドでそれらを定義する必要がありますが、フォアハンドでの記事サイズはわからないので役に立たないです。 – Mark