[ 3. 자식 요소들의 배치를 편리하게 해줄 flex ]
: float를 이용해 요소들을 배치할 경우 box-sizing:border-box 등 margin, padding 등에 따른 배치를 구성하기가 기존에는 까다로웠지만 최근에는
flex를 이용해 편리하게 배치할 수 있다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
/*
flex를 사용함으로써 자식요소에 일일이 CSS 스타일을 적용할 필요가 없다.
-> 부모 요소에만 적용하면 된다.!(엄청나군...)
*/
.father{ /* 자식요소들의 배치는 부모에서만 지정하면 됨... */
display : flex; /*flex를 이용하겠다.*/
justify-content: flex-start;
/*
justify-content 속성 : 요소들의 가로 정렬을 담당한다.(만약 flex-direction:column으로 된 경우 세로 정렬을 담당하게 됨.)
justify-content: center // 중앙 정렬
: flex-start // 왼쪽(만약 flex-direction:row-reverse일 경우 오른쪽 정렬)
: flex-end // 오른쪽 정렬(만약 flex-direction:row-reverse일 경우 왼쪽 정렬)
: space-between // 자식 요소들 사이 간격이 일정하게 배치 됨.
: space-around // 자식 요소 주변 공간이 일정하게 배치 됨.
*/
align-items: center;
/*
align-items 속성 : 요소들의 세로 정렬을 담당한다.(만약, flex-direction:column일 경우 가로 정렬을 담당하게 됨)
align-items : center // 세로 중앙 정렬
align-items : baseline // 세로 시작 지점부터 배치
align-items : stretch // 쭉 당겨서 첨부터 끝까지 닿도록 배치
align-items : flex-start // top부터 정렬 (만약 flex-direction:column-reverse일 경우 아래부터 정렬)
align-items : flex-end // bottom부터 정렬(colum-reverse일경우 위부터 정렬)
*/
flex-direction:row;
/*
flex-direction 속성 : flex 자식들의 배치 방향을 결정지음
flex-direction : row // 왼쪽부터 오른쪽으로 수평 배치 1,2,3,4,...
flex-direction : row-reverse // 수평배치하되 거꾸로 4,3,2,1 로 배치
flex-direction : column // 수직으로 배치
flex-direction : column-reverse // 수직으로 배치하되 역순으로 배치
*/
flex-wrap: wrap;
/*
flex-wrap 속성 : 화면을 축소할 경우 자식들의 배치를 어떻게할 것인가를 결정 지음
-> 따로 설정하지 않으면 default가 flex-wrap : nowrap임 따라서, 배치된 그 상태로 크기를 줄여가며
배치는 바끼지 않도록 줄어들게 됨
flex-wrap : wrap; // 으로 지정시, 웹브라우저를 축소해 배치가 깨지게 되면 자동으로 아래로 내려가도록 함
*/
}
.box{ /* 자식 요소들은 그냥 크기 정도만 설정하면 됨... */
width:200px;height:200px;background-color:yellow;margin-top:5px;margin-right:5px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
-> 추가적으로 flex를 연습해볼 수 있는 사이트
http://flexboxfroggy.com/#ko
'스터디 > CSS관련 Tip' 카테고리의 다른 글
| 4. CSS animation (0) | 2018.09.23 |
|---|---|
| 2. CSS3의 transform을 통한 요소 변형, 위치 제어 (0) | 2018.09.23 |
| 1. CSS 관련 Tip(반응형 제작 포함) 정리 (0) | 2018.09.23 |