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

집

웹 프론트엔드

CSS 튜토리얼

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

巴扎黑

May 16, 2018 am 09:12 AM

cssdisplayflex

이 글에서는 주로 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으로 문의하세요.

관련 기사

그리드의 자동 흐르는 힘의 고밀도 키워드Apr 12, 2025 am 09:23 AM

뉴스 웹 사이트의 홈페이지 작업을 수행한다고 말하자. 당신은 아마도 그리드 레이아웃에서 일부 카드 기반 콘텐츠를 보곤했을 것입니다. 여기에서는 고전입니다

이것을 사용합니다Apr 12, 2025 am 09:22 AM

나와의 약간의 인터뷰에서 이것을 사용합니다. 나는 내가 누구인지 알기 때문에 소개를 건너 뛰지 만 나머지는 여기에 나머지를 다시 게시합니다.

스크롤에 애니메이션 텍스트Apr 12, 2025 am 09:18 AM

우리는 재미있는 New York Times 기사가 나왔을 때 오래 전에 곡선 텍스트를 애니메이션하는 아이디어를 다루었습니다. 내가 한 것은 그들이 어떻게 그것을했는지 엿보고 추출하는 것이 었습니다.

스노우 팩Apr 12, 2025 am 09:17 AM

스노우 팩. 그 이름을 사랑하십시오. 이것은 Pika 사람들의 새로운 일입니다. 그것은 어떤 의미에서 번들러 대안입니다. 패키지 위로 실행됩니다

NetNewswire 및 FeedbinApr 12, 2025 am 09:15 AM

NetNewswire는 2002 년에 데뷔 한 클래식 RSS 앱 중 하나입니다. 5.0으로 가면서 2019 년 8 월에 오픈 소스를 받았습니다! 당신은 그것을 바로 잡을 수 있습니다

Procreate 드로잉을 웹 애니메이션으로 바꾸는 방법Apr 12, 2025 am 09:14 AM

최근에 Apple Pencil이있는 Procreate 앱을 사용하여 iPad를 그리기 시작했습니다. 이런 식으로 그리는 유연성을 즐기고 있습니다. 보통 나를 지키는 것은 무엇입니까?

'CSS4'업데이트Apr 11, 2025 pm 12:05 PM

내가 CSS4¹에 처음으로 차지했기 때문에, 그것에 대해 많은 논의가있었습니다. 나는 여기 다른 사람들로부터 내가 가장 좋아하는 생각을 마무리하려고 할 것입니다. 거기 있습니다

세 가지 유형의 코드Apr 11, 2025 pm 12:02 PM

새 프로젝트를 시작할 때마다 원하는 경우 세 가지 유형 또는 카테고리로보고있는 코드를 구성합니다. 그리고 나는 이러한 유형을 적용 할 수 있다고 생각합니다

See all articles

핫 AI 도구

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.