>  기사  >  웹 프론트엔드  >  CSS3 적응형 레이아웃 기술 유연한 크기

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

零到壹度
零到壹度원래의
2018-03-24 11:03:242168검색

그리드 레이아웃은 유연한 크기(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.