CSS의 display:flex||inline-flex 속성에 대한 자세한 설명
- 巴扎黑원래의
- 2018-05-16 09:12:1216400검색
이 글에서는 주로 CSS의 display:flex 및 display:inline-flex 속성을 소개합니다. 이 글에서는 두 가지 예제 코드를 통해 display:flex 및 display:inline-flex의 사용 효과를 소개합니다. 참고할 수 있으니 아래를 살펴보자.
소개
Flex는 유연한 상자(Flexible Box)의 약자로 "탄력적인 레이아웃"이라는 뜻으로 상자 모양의 레이아웃에 최대한의 유연성을 제공하는 데 사용됩니다. 모델. 모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다.
flex: 객체를 플렉스 박스로 표시
inline-flex: 객체를 인라인 블록 레벨 플렉스 박스로 표시
flex 샘플 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
width:200px;
background-color: red;
display: flex;/*父p设置该属性*/
}
.main>p{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>렌더링은 다음과 같습니다.
display:inline-flex 샘플 코드
효과를 확인하려면 위의 display:flex를 display:inline-으로 바꾸세요. flex, 너비:200px을 삭제합니다. 테스트하기 전에는 .main이 전체 행을 차지할 것이라고 생각할 수도 있습니다. 그러나 테스트 결과는 모든 하위 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
background-color: red;
display: inline-flex;/*父p设置该属性*/
}
.main>p{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>의 p 크기에 따라 너비와 높이를 조정한다는 것입니다. 렌더링은 다음과 같습니다:
위 내용은 CSS의 display:flex||inline-flex 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.