CSS3 적응형 레이아웃 기술 유연한 크기

그리드 레이아웃은 유연한 크기(flex-size)를 지원하는데 이는 좋은 적응형 레이아웃 기술입니다.

유연한 크기 조정은 fr 크기 단위를 사용합니다. 이 단위는 "분수" 또는 "분수 단위"라는 단어의 처음 두 글자에서 유래하며 전체 공간의 일부를 나타냅니다.

예를 들어 다음 CSS 규칙:

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

은 4개의 열이 있음을 의미하고, 첫 번째 열은 100px 고정 크기이고, 세 번째 열 max-content는 넘치거나 줄바꿈하지 않고 요소만 포함하는 크기를 의미하고, 나머지 2개는 열은 모두 유연한 크기입니다.

탄성 크기 계산 규칙에 따라 둘은 남은 사용 가능한 공간을 균등하게 나눕니다(이 두 열의 탄성 계수는 ​​동일하며 둘 다 1입니다).

CSS3 데모 코드:

#grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
}
#title {
    background-color: lime;
}
#score {
    background-color: yellow;
}
#stats {
    background-color: lime;
}
#message {
    background-color: orange;
}
p {
    height: 80px;
    line-height: 80px;
    text-align: center;
}

HTML 코드:

<p id="grid">
    <p id="title">Site Logo</p>
    <p id="score">Slogan</p>
    <p id="stats">User Zone</p>
    <p id="message">Message</p>
</p>

관련 권장 사항:

유연한 레이아웃에 대한 자세한 설명

유연한 레이아웃

css3 유연한 레이아웃

위 내용은 CSS3 적응형 레이아웃 기술 유연한 크기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!