ホームページ > 記事 > ウェブフロントエンド > シームレスなスクロールのための CSS Flex レイアウト
この記事では主にシームレスなスクロールを実現するためのフレックスレイアウトのサンプルコードを紹介し、皆様に共有します。
#フレックス レイアウト
いわゆるフレックス レイアウトは、フレキシブル ボックス レイアウトです。このレイアウトがより一般的です。モバイル端末で使用されていたフレックスレイアウトですが、ブラウザの発展に伴いバージョンが更新され、その利点からフレックスレイアウトが広く使われるようになりました。
アイデア: まず、この小さなデモの構造、つまり上部と下部の構造を分析します。それをラップするコンテナー (いわゆる大きなボックス) を使用できます。 )。* { margin: 0; padding: 0; } a { text-decoration: none; } .box-big { position: absolute; display: flex; left: 50%; top: 50%; border: 1px solid #9FD6FF; transform: translate(-50%, -50%); width: 707px; height: 170px; /* background-color: pink; */ flex-wrap: wrap; overflow: hidden; } .box-top { width: 707px; height: 30px; border-bottom: 1px solid #9FD6FF; background-color: #FEFEFE; } .p-bottom { width: 707px; height: 136px; /* background-color: darkgoldenrod; */ overflow: hidden; } .st-icon-android { display: inline-block; width: 15px; height: 15px; background-image: url(../img/hd.gif); margin: 8px; } h5 { position: absolute; top: 6PX; left: 30px; color: #307DD1; } ul { position: absolute; left: 90px; width: 3000px; height: 100%; animation: run 20s linear infinite; } li { list-style: none; float: left; width: 140px; height: 100%; margin: 0 5px 0 5px; /* background-color: gold; */ flex-wrap: wrap; } .photo { margin-top: 5px; width: 140px; height: 105px; text-align: center; /* background-color: springgreen; */ } p { text-align: center; } img { cursor: pointer; } @keyframes run { 0% { left: 0; } 100% { left: -745px; } }推奨チュートリアル: "
CSS チュートリアル
"以上がシームレスなスクロールのための CSS Flex レイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。