CSS의 display:flex||inline-flex 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS의 display:flex||inline-flex 속성에 대한 자세한 설명

巴扎黑

풀어 주다： 2018-05-16 09:12:12

원래의

16372명이 탐색했습니다.

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!