CSS3를 사용하여 유연한 상자 레이아웃을 구현하는 방법
- 坏嘻嘻원래의
- 2018-09-26 11:50:364798검색
기존 레이아웃 구성표는 플로트, 디스플레이 및 위치의 상자 모델을 기반으로 합니다. 개발 언어가 향상됨에 따라 유연한 상자 레이아웃 모델은 기존 레이아웃의 복잡성을 버리기 때문에 웹 개발자의 도구 상자에서 좋은 도구가 되었습니다. 상자 설정은 페이지 호환성에 대한 개발자의 요구 사항을 완벽하게 충족할 수 있습니다. 즉, 페이지가 다양한 화면 크기와 장치 유형에 적응해야 하는 경우에도 요소가 적절한 동작을 하도록 보장할 수 있습니다. 이 글은 유연한 박스 레이아웃을 빠르게 사용하는 방법에 대한 내용을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
Flexible Box의 이해
Flexible 상자는 Flex 컨테이너(Flex 컨테이너)로 구성됩니다. ) 유연한 하위 요소(Flex 항목)로 구성되며, 유연한 컨테이너는 display 속성의 값을 flex 또는 inline-flex로 설정하여 유연한 컨테이너로 정의할 수 있습니다. -강요.
기존 박스 모델은 이러한 특수 페이지의 레이아웃에 매우 불편합니다. 예를 들어 수직 중앙 정렬 및 하위 요소 정렬 구현은 매우 번거롭습니다. 그러나 w3c의 flex 레이아웃 도입으로 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있어 개발 프로세스가 크게 단순화되었으며 모든 브라우저에서 flex 레이아웃이 지원됩니다.
관련 강좌 추천: flex 레이아웃 동영상 튜토리얼 추천: 2018년 최신 5개 flex elastic 레이아웃 동영상 튜토리얼
#🎜🎜 #연성 상자의 예
예 1: 기존 모델
<style>
.flex-container{
display: flex;
display: -webkit-flex;
width: 450px;
height: 150px;
background-color: darkcyan;
}
.flex-item{
width: 130px;
height: 125px;
margin: 10px;
background-color: yellowgreen;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item one">盒子1</div>
<div class="flex-item tow">盒子2</div>
<div class="flex-item three">盒子3</div>
</div>
</body>#🎜🎜 # 구조는 그림과 같습니다
<style>
.flex-container{
display: flex;
display: -webkit-flex;
width: 450px;
background-color: darkcyan;
flex-direction: row-reverse;
}
.flex-item{
width: 130px;
height: 125px;
margin: 10px;
background-color: yellowgreen;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item one">盒子1</div>
<div class="flex-item tow">盒子2</div>
<div class="flex-item three">盒子3</div>
</div>
</body>구조는 사진과 같습니다
#🎜🎜 #
예시 3 : 중앙에 상자가 표시됩니다 
<style>
.flex-container{
display: flex;
display: -webkit-flex;
width: 500px;
background-color: darkcyan;
justify-content: center;
}
.flex-item{
width: 130px;
height: 125px;
margin: 10px;
background-color: yellowgreen;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item one">盒子1</div>
<div class="flex-item tow">盒子2</div>
<div class="flex-item three">盒子3</div>
</div>
</body>구조는 그림과 같습니다#🎜 🎜#
예 4: 하단에서 표시
<style>
.flex-container{
display: flex;
display: -webkit-flex;
width: 500px;
height: 211px;
background-color: darkcyan;
align-items: flex-end;
}
.flex-item{
width: 130px;
height: 125px;
margin: 10px;
background-color: yellowgreen;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item one">盒子1</div>
<div class="flex-item tow">盒子2</div>
<div class="flex-item three">盒子3</div>
</div>
</body>
구조는 다음과 같습니다. 사진에 나와있습니다
# 🎜🎜#위 내용은 CSS3를 사용하여 유연한 상자 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!