``요소에서 Flexbox가 예상대로 작동하지 않는 이유는 무엇입니까?

왜

Flexbox에 저항

플렉스 디스플레이를

요소를 사용하면 Firefox, Chrome 등의 브라우저에서 예상치 못한 동작이 발생합니다.

에 대한 특별한 처리를 나타내지 않는 사양에도 불구하고 Flex는 블록처럼 동작하고 inline-flex는 inline-block처럼 동작합니다.

이유

버그에 따르면 984869,

, 및 은 순수 CSS에서는 완전히 구현 가능하지 않으므로 블랙박스 역할을 합니다. 즉, 다른 CSS 스타일 요소에 동일하게 응답하지 않을 수 있습니다.

구체적으로

의 경우 브라우저는 하위 요소의 레이아웃을 제어하는 ​​미리 결정된 프레임 클래스를 사용하여 이를 렌더링합니다. 이 프레임 클래스는 CSS에 설정된 표시 속성을 재정의합니다.

모범 사례

크로스 브라우저에서는 래퍼

를 사용하는 것이 좋습니다.

내에서와 마찬가지로

내부에 있습니다.

Firefox 업데이트

Firefox 버전 46 이상에서는 < fieldset>, 버그 1230207을 해결합니다.

위 내용은 ``요소에서 Flexbox가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：CSS를 사용하여 Django 양식의 스타일을 효과적으로 지정하려면 어떻게 해야 합니까? 다음 기사：jQuery에서 CSS3 전환 및 애니메이션의 완료를 어떻게 감지할 수 있습니까?

본 웹사이트의 성명

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

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2378

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2503

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

2129

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

2001

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

2077

관련 주제

더>

• phpstorm에서 프로젝트를 내보내는 방법
• 이 Windows 사본이 정품이 아닌 문제를 해결하는 방법
• Linux에서 시스템 정보 보기
• 이더리움 오늘의 시장 가격
• Java 성공 및 javac 실패에 대한 솔루션
• Windows 11에서 자동 업데이트를 비활성화하는 것이 유효하지 않은 이유
• fprintf와 printf의 차이점
• window.setinterval

인기 추천

• 디스플레이 타원을 초과하도록 CSS를 설정하는 방법
• CSS에서 글꼴 크기를 설정하는 방법
• CSS에서 호버를 사용하는 방법
• CSS에서 문자 간격을 설정하는 방법
• CSS3의 새로운 기능은 무엇입니까?

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1426315
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4274256
• 
  JAVA 초보자용 비디오 튜토리얼

  2565526
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  509139
• 
  PHP 제로 기반 입문 튜토리얼

  865247

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1426315 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2565526 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  509139 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  216139 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  896636 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  8011 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  6374 학습 시간
• 
  Go 언어 실습 GraphQL

  5269 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  724 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  26632 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved