플렉스 방향

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 1504 1504

플렉스 방향

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>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
917	CSS	Word Spacing 단어 간격	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1902
916	CSS	Text Direction 텍스트 방향	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1994
915	CSS	Line Height 라인 높이	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2012
914	CSS	Letter Spacing 글자 간격 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2930
913	CSS	Text Indentation 텍스트 들여 쓰기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1955
912	CSS	텍스트 변환 Text Transformation	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2022
911	CSS	텍스트 방향 Text Direction	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1993
910	CSS	라인 높이 Line Height	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1863
909	HTML	글자 간격 Letter Spacing	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2295
908	CSS	text-indent	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2226
907	CSS	text-transform	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2058
906	CSS	text-decoration	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2310
905	CSS	Text Alignment	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2048
904	CSS	Text Color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1839
903	CSS	Outline - Shorthand property	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1968
902	CSS	Outline Width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2185
901	CSS	Outline Color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2067
900	CSS	CSS Outline	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2497
899	CSS	CSS Box Model	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2476
898	CSS	Setting max-width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2051
897	CSS	CSS Height and Width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1677
896	CSS	CSS Padding	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2326
895	CSS	CSS Margins	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2001
894	CSS	CSS Border Properties	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2617
893	CSS	CSS Syntax and Selectors	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1980
892	HTML	The HTML <audio> Element	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2067
891	HTML	HTML <video> 요소 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2537
890	HTML	html google map	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2622
889	HTML	SVG와 캔버스의 차이점	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3725
888	HTML	SVG Logo	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2164