웹프로그래밍

Global It Leader!!


CSS


 
 

FLEX 의 기본사용법

페이지 정보

작성자 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 85회 작성일 24-10-11 10:37

본문

기본구조

flex는 container 와 item 의 두가지 요소로 구성된다. 

<div class="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> </div>

 

기본사용

display:flex;

※ display:inline-flex; 는 인라인레밸의 컨테이너가 생성됨, 이렇게 적용하면 컨테이너의 정렬이 가로로 정렬된다. 

※ display:flex;  자식요소들이 flex item의 성격을 갖게 된다.

 

flex container 주요속성

justify-content


flex-start //기본값입니다. 좌측정렬 flex-end //우측정렬 center //가운데정렬 space-between //아이템과 아이템사이의 일정한 간격 space-around //아이템의 앞뒤로 일정한 간격을 space-evenly //아이템 외의 남는공간을 아이템 사이에 일정하게 배분 
d1c4db97e4af3425cb3beb2f8934a583_1728610777_86.png
 

justify-content


nowrap //줄바꿈하지 않고 컨터이너를 벗어남 wrap //줄바꿈 wrap-reverse // 위로줄바꿈
 

flex-direction

row //가로방향으로 정렬 column //세로방향으로 정렬 row-reverse //가로로 정렬하되 역순으로 column-reverse //세로로 정렬하되 역순으로 정렬

 

flex-flow

flex-flow: flex-direction flex-wrap 


flex-flow : row wrap //flex-direction의 row속성과 flex-wrap의 wrap

 

flex item 주요속성

flex-direction: row; //가로로 flex-basis: auto; // 공간배분전 기본넓이 설정, 컨테이너 너비만큼 줄어듬, width 보다 우선함 flex-wrap; nowrap; // 줄넘김을 하지 않음 flex-grow; 0; // 여백을 채우려 늘이지 않음, 증가너비 비율, 크면 더 많은 너비가 늘어남 flex-shrink:1 ; // 너비가 좁아지면 같이 줄어듬, 감소너비 비율, 크면 더 많은 너비가 줄어듬

 

flex : 증가너비 감소너비 기본너비;

단축속성으로 사용할 수 있다. 

flex-grow를 제외한 개별속성은 생략이 가능하다.  flex-grow를 제외한 값은 생략이 가능하므로

flex 1;  = flex-grow:1; 과 같다.

 

이는 다른말로 바꾸면 flex 1; 은 flex-grow:1; 과  flex-shrink:1 과 flex-basis:auto; 와 같다. 

하지만, 유의할점은 flex 1: 일때 flex-basis 는 '0' 이된다. (flex 구문에서 예외적용)

 

바로 사용가능한 간편한 사용예

.parent { display: flex; } .child1 { flex: 2; } .child2 { flex: 1; }

이경우에 child1 는 child2의 두배의 넓이를 가지게 된다.

(flex-grow 가 2:1이기 때문, 그냥 flex:1 을 주면 같은 넓이가된다)

 

 

FLEX의 한계 

IE 10부터 지원하기 때문에 -ms- 와 같은 prefix가 필요하다. ( -ms- 와 다른 값도 넣어주면 좋음)

display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:-o-flex;

댓글목록

등록된 댓글이 없습니다.

전체 80
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
열람중 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 86 10-11
79 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 85 10-09
78 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 103 07-26
77 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 106 06-10
76 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 112 05-17
75 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 138 05-16
74 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 111 05-14
73 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 147 05-02
72 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 545 07-31
71 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 791 04-09
70 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1124 09-01
69 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2121 04-24
68 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3272 04-24
67 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1406 03-28
66 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2892 03-26
65 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1410 03-26
64 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1404 03-25
63 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1447 03-18
62 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 8680 11-28
61 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1878 09-20