CSS flex-wrap 속성을 사용하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS flex-wrap 속성을 사용하는 방법

藏色散人

May 27, 2019 pm 04:48 PM

css flex-wrap 속성은 플렉스 컨테이너가 한 줄인지 여러 줄인지 지정하는 데 사용됩니다. 동시에 수평 축 방향에 따라 새 줄이 쌓이는 방향이 결정됩니다. CSS 구문은 flex-wrap입니다. nowrap|wrap|wrap-reverse|initial|inherit; if 요소가 flexbox 객체의 요소가 아닌 경우 flex-wrap 속성은 효과가 없습니다.

CSS flex-wrap 속성을 사용하는 방법

CSS flex-wrap 속성을 어떻게 사용하나요?

정의 및 사용법

flex-wrap 속성은 플렉스 컨테이너가 단일 행인지 다중 행인지 지정하고, 가로 축 방향에 따라 새 행이 쌓이는 방향이 결정됩니다. .

참고: 요소가 Flexbox 객체의 요소가 아닌 경우 flex-wrap 속성은 효과가 없습니다.

기본값: nowrap

상속: 아니요

애니메이션 가능: 아니요

버전: CSS3

JavaScript 구문:

 object.style.flexWrap="nowrap"

CSS 구문:

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

속성 값

nowrap 기본값입니다. 유연한 항목은 행이나 열로 분할되지 않도록 규정되어 있습니다.

wrap은 필요할 때 행이나 열로 분할할 수 있는 유연한 항목을 제공합니다.

wrap-reverse는 필요한 경우 유연한 항목을 행이나 열로 분할하되 역순으로 분할하도록 지정합니다.

initial은 이 속성을 기본값으로 설정합니다.

inherit는 상위 요소에서 이 속성을 상속합니다.

예

필요한 경우 Flexbox 요소를 분할하도록 합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;
    flex-wrap: wrap;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-wrap 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-wrap 属性支持该属性。</p>

</body>
</html>

효과:

CSS flex-wrap 속성을 사용하는 방법

위 내용은 CSS flex-wrap 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

usestate () 이해 : 국가 관리에 대한 포괄적 인 안내서Apr 25, 2025 am 12:21 AM

usestate () isareacthookusedtomanagestatefunctionalcomponents.1) itinitializesandupdatesstate, 2) workaledtthetThetThepleFcomponents, 3) canleadto'Stalestate'ifnotusedCorrecrally 및 4) performancanoptimizedUsecandusecaldates.

React 사용의 장점은 무엇입니까?Apr 25, 2025 am 12:16 AM

Reactispopularduetoitscomponent 기반 아카데입, 가상, Richcosystem 및 declarativenature.1) 구성 요소 기반 ectureallowsforeusableuipieces, Modularityandmainability 개선 가능성.

React의 디버깅 : 일반적인 문제를 식별하고 해결합니다Apr 25, 2025 am 12:09 AM

TodebugreactApplicationseffective, UsetheseStradegies : 1) 주소 propdrillingwithContapiorredux.2) handleaSnchronousOperationswithUsestAndUseefect, abortControllerTopReceConditions.3) 최적화 formanceSeMoAnduseCalbackTooid

React의 usestate () 란 무엇입니까?Apr 25, 2025 am 12:08 AM

usestate () inreactAllowsStateManagementInfunctionalComponents.1) itsimplifiessTatemanagement, 2) usethepRevCountFunctionToupDatesTestateSpreviousValue, PropeingStaleScallanceBackferperperperperperperperperperperperperpertoptiMizatio

usestate () vs. usereducer () : 주 요구에 맞는 올바른 후크 선택Apr 24, 2025 pm 05:13 PM

chelectionSimple, IndependentStateVaribles; useUserEducer () useuserEducer () forcomplexStateLogicor () whenStatedSonpreviousState.1) usestate () isidealforsimpleupdatesliketogglingabooleorupdatingacounter.2) usbetterformanagingmentiplesub-vvalusorac

usestate ()로 상태 관리 : 실용적인 자습서Apr 24, 2025 pm 05:05 PM

Usestate는 클래스 구성 요소 및 기타 상태 관리 솔루션보다 우수합니다. 국가 관리를 단순화하고 코드를 더 명확하게하고 읽기 쉽고 React의 선언적 특성과 일치하기 때문입니다. 1) Usestate는 함수 구성 요소에서 상태 변수를 직접 선포 할 수있게합니다. 2) 후크 메커니즘을 통해 다시 렌더링하는 동안 상태를 기억합니다.

usestate ()를 사용하고 대체 상태 관리 솔루션을 고려할 때Apr 24, 2025 pm 04:49 PM

useUsestate () forlocalcomponentStateManagement; 고려 사항 forglobalstate, complexlogic, orperformanceissues.1) usestate () isidealforsimple, localstate.2) useglobalstatesolutionslikereduxorcontextforsharedstate.3) optforredooxtoolkitormobxcomcoccomcoccomcoccomcoccomcoccomcoccomcoccomcoccomporccomcoccomporccomcoccomport

React의 재사용 가능한 구성 요소 : 코드 유지 관리 및 효율성 향상Apr 24, 2025 pm 04:45 PM

reusablecomponentsinreacececodemainabenabilityandefficiency는 hallowingesamecomponentacrossdifferentpartsofanapplicationorprojects.1) 그들을 retuduceredundancyandsimplifyupdates.2) theyseconsistencyinuserexperience.3) theyquireoptim

See all articles