Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 스타일 flexDirection 속성

<시간/>

HTML DOM 스타일 flexDirection 속성은 플렉스 요소의 배치 방향을 설정하거나 반환하는 데 사용됩니다.

다음은 −

의 구문입니다.

flexDirection 속성 설정하기 -

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

위의 속성은 다음과 같이 설명됩니다 -


설명

이는 플렉스 항목을 가로 행으로 표시하며 기본값입니다.
행 반전
플렉스 항목을 가로로 표시하지만 행의 역순으로 표시합니다.

플렉스 항목을 세로로 열로 표시합니다.
열 반전
플렉스 항목을 세로로 표시하지만 열의 역순으로 표시합니다.
초기
이 속성을 초기 값으로 초기화합니다.
상속
상위 속성 값 상속

flexDirection 속성의 예를 살펴보겠습니다 -

예시

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      box-shadow: 0 0 0 3px #a323c3;
      display: flex;
      flex-direction: column-reverse;
   }
   #demo div {
      margin: auto;
      border: thin solid green;
   }
</style>
<script>
   function changeFlexDirection() {
      document.getElementById("demo").style.flexDirection="row-reverse";
      document.getElementById("Sample").innerHTML="The flex direction for the container div is    changed to row-reverse";
   }
</script>
</head>
<body>
   <div id="demo">
      <div>1  <img src="https://www.tutorialspoint.com/images/3d.png"></div>
      <div>2  <img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
      <div>3  <img src="https://www.tutorialspoint.com/images/css.png"></div>
      <div>4  <img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
   </div>
   <p>Change the above container div flex direction by clicking the below button</p>
   <button onclick="changeFlexDirection()">Change Flex Direction</button>
   <p id="Sample"></p>
</body>
</html>

출력

HTML DOM 스타일 flexDirection 속성

"플렉스 방향 변경을 클릭하면 " 버튼 -

HTML DOM 스타일 flexDirection 속성