집 >웹 프론트엔드 >CSS 튜토리얼 >원활한 스크롤을 위한 CSS Flex 레이아웃

원활한 스크롤을 위한 CSS Flex 레이아웃

Guanhui원래의: 2020-07-21 12:43:403488검색

이 기사에서는 원활한 스크롤을 구현하기 위한 flex 레이아웃의 샘플 코드를 주로 소개합니다. 자세한 내용은 다음과 같습니다.

케이스 데모

flex 레이아웃

소위 플렉스 레이아웃은 플렉서블 박스 레이아웃입니다. 이런 종류의 레이아웃은 모바일 단말에서 더 일반적으로 사용되지만, 브라우저 버전이 업데이트됨에 따라 플렉스 레이아웃은 그 자체의 장점으로 인해 점점 더 보편화되고 있습니다.

생각하기:

먼저 이 작은 데모의 구조인 상부 및 하부 구조를 분석하고 컨테이너(소위 큰 상자)를 사용하여 포장할 수 있습니다.
상단은 내비게이션, 상단은 ul입니다. 아래에서는 2개의 p, 100% 너비 및 맞춤 높이를 사용할 수 있습니다.
다음으로 모델을 열고 특정 상위 상자를 기억하겠습니다! display:flex; 그러면 어떻게 위아래로 나눌 수 있나요? 계속해서 위쪽과 아래쪽을 분리하는 flex-wrap:wrap; 매우 편리하지 않나요?
다음 단계는 아래쪽 부분입니다. ul은 p에 중첩되어 있으며 p의 높이는 이해하기 쉽습니다. , 무한히 넓을 수 있습니다! ! ! 너비를 ul 3000px
로 하고 그다음에 li를 넣자. 보시다시피 li 내부에도 위쪽과 아래쪽 구조가 있으니 ㅋㅋㅋ! li도 flex-wrap: Wrap;을 활성화해야 합니까? 상단의 p는 img용이고 하단의 a 태그입니다.
떠야 한다는 점을 기억하세요! 그리고 Overflow:hidden을 거기에 넣으세요

애니메이션 효과

5개의 사진이 있고 이제 오른쪽에서 왼쪽으로 이동하게 됩니다. 그럼 ul mobile이라고 부르는데요, li mobile 운전 가능한가요?
@keyframes를 사용하여 ul의 왼쪽 값을 변경하는데 문제가 발생합니다. 5개의 사진을 넣고 ul이 이동하면 오른쪽이 사라지고 비어 있습니다. 무엇을 해야 할까요? ? ?
5리를 한 장 더 복사해서 뒤쪽에 놓을 수 있나요? 대답은 '예'입니다! ! 우리 왼쪽이 li의 첫 번째 그룹을 제거하면 두 번째 그룹은 나타나지 않습니다. 그런 다음 애니메이션을 사용합니다. 20초 선형 무한 실행, 무한 반복해도 괜찮나요?

css 부품 코드

* {
    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 Flex 레이아웃

관련 기사