CSS3에서 FLEX를 사용하여 BorderLayout 레이아웃을 빠르게 구현하는 방법

BoxLayout 레이아웃은 백엔드 UI 코드를 작성한 프로그래머에게는 익숙할 것입니다. HTML 프레임을 포함하여 프론트엔드 코드를 작성한 사람에게도 익숙할 것입니다. 그러나 과거에는 컨트롤을 위해 float를 사용했습니다. 상대적으로 제어하기 어려웠던 CSS는 더 복잡하고 더 많은 태그와 코드를 추가해야 합니다.

이 인터페이스를 읽은 후 태그의 코드 레이아웃 작성을 시작할 수 있습니다.

<div class="parent">
    <header>北</header>
    <aside class="left">东</aside>
    <div class="center">中</div>
    <aside class="righ">西</aside>
    <footer>南</footer>
</div>

코드는 매우 간단합니다. 물론 보조 관계의 경우 필요하지 않으면 부모를 제거하고 본문을 부모로 사용할 수도 있습니다.

그런 다음 CSS를 사용하여 구현하기 시작합니다. BoxLayout 및 상위 상위도 여기에 정의됩니다. 이는 플렉스 컨테이너이며 방향은 왼쪽에서 오른쪽이며 래핑할 수 있습니다.

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}

그런 다음 플렉스 항목, 머리글 및 바닥글의 레이아웃 모드를 설정합니다. 전체 라인을 차지하기 때문에 flex-basis:100%로 설정했고, 양쪽 옆의 너비가 동일하고 중앙이 양쪽 측면보다 넓기 때문에 flex-grow를 사용하여 점유 비율을 설정했습니다. .

header, footer{
    flex-basis: 100%;
}.center{
    flex-grow: 3;
}aside{
    flex-grow:1;
}

이런 식으로 BoxLayout 레이아웃이 구현됩니다. 매우 간단하지 않나요? 해당 높이와 배경색을 설정해야 합니다. 그렇지 않으면 모두 흰색과 흰색으로 표시됩니다. 반응이 없는 것 같아요! 참고로 이렇게 설정했어요

으으으

최종 테스트는 OK!

위 내용은 CSS3에서 FLEX를 사용하여 BorderLayout 레이아웃을 빠르게 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!