Cách chưa giống facebook (ok)
Cách 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div id="content">
<span style="min-width: 16px;"></span>
<p>
<img alt="Image" class="rlm6cutj cu88ahg3" src="https://i.picsum.photos/id/210/800/800.jpg?hmac=oEh7MEs07PUiz6xaG2p220vaa0crOu3q3rUcKmjsdtY">
</p>
<p>
<img alt="Image" class="rlm6cutj cu88ahg3" src="https://i.picsum.photos/id/1031/800/800.jpg?hmac=cOZeqm6pvLPK1_6_OPWT8NJS-kNT0h_mU82pmEk9BWc">
</p>
<p>
<img alt="Image" class="rlm6cutj cu88ahg3" src="https://i.picsum.photos/id/781/800/800.jpg?hmac=67SiOocOvyxF-k9w_sMT7vdGGikGHic4TmuWe1nzBTk">
</p>
<p>
<img alt="Image" class="rlm6cutj cu88ahg3" src="https://i.picsum.photos/id/1039/800/800.jpg?hmac=_yLp1ssgvLOd-kNxo1vwmJtEzWlhT2aIDVZOFfHT8YE">
</p>
<p>
<img alt="Image" class="rlm6cutj cu88ahg3" src="https://i.picsum.photos/id/875/800/800.jpg?hmac=tdyKps7_h-Z2NKDrqNRiavGKQdcHozLESsj9i2eGA_k">
</p>
<span style="min-width: 44px;"></span>
</div>
</body>
</html>#content {
width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: row;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding: 44px;
overscroll-behavior-x: contain;
p {
flex-basis: 200px;
scroll-snap-align: start;
flex-shrink: 0;
margin-right: 8px;
flex-grow: 0;
}
}Last updated