플렉스 방향 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

플렉스 방향 정보

CSS 플렉스 방향

본문

플렉스 방향


flex-direction속성 플렉스 콘테이너 내의가요 항목의 방향을 지정한다. 기본값은 flex-direction입니다 row(왼쪽에서 오른쪽, 위에서 아래).


다른 값은 다음과 같습니다.


1. row-reverse - 쓰기 모드 (방향)가 왼쪽에서 오른쪽 인 경우 플렉스 항목이 오른쪽에서 왼쪽으로 배치됩니다

2. column - 쓰기 시스템이 가로 인 경우 플렉스 항목이 세로로 배치됩니다.

3. column-reverse - 열과 같지만 반대입니다.


다음 예제에서는 row-reverse값 을 사용한 결과를 보여줍니다 .


.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: row-reverse;

    flex-direction: row-reverse;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}




<!DOCTYPE html>

<html>

<head>

<style> 

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: row-reverse;

    flex-direction: row-reverse;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}


.flex-item {

    background-color: cornflowerblue;

    width: 100px;

    height: 100px;

    margin: 10px;

}

</style>

</head>

<body>


<div class="flex-container">

  <div class="flex-item">flex item 1</div>

  <div class="flex-item">flex item 2</div>

  <div class="flex-item">flex item 3</div>  

</div>


</body>

</html>


추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT