flex layout
Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다.
flex 관련 속성
속성 | 설명 |
---|---|
align-content | align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다. |
align-items | align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. |
align-self | align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. |
flex | flex 속성은 콘텐츠의 성질을 flex로 정의합니다. |
flex-basis | flex-basis 속성은 요소의 기본 단위를 정의합니다. |
flex-direction | flex-direction 속성은 요소의 정렬 방향을 정의합니다. |
flex-flow | flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다. |
flex-grow | flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다. |
flex-shrink | flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다. |
flex-wrap | flex-wrap 속성은 요소의 줄 속성을 설정합니다. |
justify-content | justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. |
order | order 속성은 flex 콘텐츠의 순서를 정의합니다. |
Flex layout01
/* flex01 */
.flex01 { display: flex;}
/* flex02 */
.flex02 { display: flex;}
.item02 { flex-grow: 1;}
/* flex- grow 는 반응형이라고 생각하면 된다. */
/* flex03 */
.flex03 { display: flex;}
.item03 { flex-grow: 1; }
.item03+.item03 { margin-left: 2%;}
/* flex04 */
.flex04 { display: flex;}
.item04 { flex-grow: 1; }
.item04:nth-child(4) { flex-grow: 2; }
.item04+.item04 { margin-left: 2%;}
/* flex05 */
.flex05 {display: flex; flex-direction: row-reverse;}
.item05 { flex-basis:10%; margin-left: 2%;}
/* flex06*/
.flex06 { display: flex;}
.item06{ flex-basis: 10%; }
.item06 + .item06 { margin-left: 2%;}
.item06:last-child{ margin-left: auto; }
/* flex07 */
.flex07 { display: flex; justify-content: space-between;}
.item07{}
.item07:nth-child(1){ flex-basis:100px; }
.item07:nth-child(2){ flex-basis:300px; }
.item07:nth-child(3){ flex-basis:100px; }
Flex-direction :방향설정
.flex21 { display: flex;
flex-direction: row;
/* flex-direction: column-reverse;*/
}
.item21 { width: 100px; margin: 10px;}
Flex-wrap : 줄 넘기처리 설정
.flex21 { display: flex; }
.item21 { width: 300px; margin: 10px;}
justify-content : 가로축 방향 설정
/* flex21 */
.flex21 { display: flex; justify-content: flex-start; /*기본값*/
/* justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly; */
}
.item21 { width: 100px; margin: 10px;}
align-content : 세로축 방향 설정
/* flex21 */
.flex21 { display: flex;
height: 300px; /*세로여서 height 값이 필요한거 같다. */
flex-wrap: wrap;
align-content: stretch; /*기본값*/
/*
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly; */
}
.item21 { width: 100px; margin: 10px;}
flex
flex는 flex-grow, flex-shrink, flex-basis를 한번에 쓸쑤 있는 속기형 작성법이다.
(ex)
flex : 1 ;
/* flex-grow:1 , flex-shrink:1, flex-basis:0% */
flex: 100px;
/* flex-grow:1 , flex-shrink:1, flex-basis:100px */
flex:1 100px;
/* flex-grow:1 , flex-shrink:1, flex-basis:100px */
flex:1 1 auto;
/* flex-grow:1 , flex-shrink:1, flex-basis: auto */
/* flex21 */
.flex21 { display: flex; }
.item21 {flex-grow: 1; flex-shrink: 1; flex-basis: 0; margin: 10px;}
flex layout2
/* flex21 */
.flex21 { display: flex; flex-flow: column wrap;
/* flex-direction: ; flex-wrap: ; 이 합쳐진것이다.*/
align-content: space-between;
height: 700px;
}
.item21 {width: 32%; margin-bottom:2%;}
.item21:nth-child(1) {height: 100px;;}
.item21:nth-child(2) {height: 200px;;}
.item21:nth-child(3) {height: 300px;;}
.item21:nth-child(4) {height: 200px;;}
.item21:nth-child(5) {height: 200px;;}
.item21:nth-child(6) {height: 200px;;}
.item21:nth-child(7) {height: 300px;;}
.item21:nth-child(8) {height: 200px;;}
.item21:nth-child(9) {height: 100px;;}
.item21:nth-child(3n+1) {order: 1;}
.item21:nth-child(3n+2) {order: 2;}
.item21:nth-child(3n) {order: 3;}
Grid layout
속성 | 설명 |
---|---|
grid | grid 속성은 그리드 레이아웃을 정의합니다. |
grid-area | grid-area |
grid-auto-columns | grid-auto-columns는 열의 크기를 설정합니다. |
grid-auto-flow | grid-auto-flow는 자동 배치 방식을 설정합니다. |
grid-auto-rows | grid-auto-rows는 행의 크기를 설정합니다. |
grid-column | grid-column |
grid-column-end | grid-column-end |
grid-column-gap | grid-column-gap |
grid-column-start | grid-column-start |
grid-gap | grid-gap |
grid-row | grid-row는 그리드 아이템의 단축 속성을 설정합니다. |
grid-row-end | grid-row-end는 그리드 아이템 행의 끝 위치를 설정합니다. |
grid-row-gap | grid-row-gap는 그리드 아이템 행의 간격을 설정합니다. |
grid-row-start | grid-row-start는 그리드 아이템 행의 시작 위치를 설정합니다. |
grid-template | grid-template |
grid-template-areas | grid-template-areas |
grid-template-columns | grid-template-columns은 열의 크기를 설정합니다. |
grid-template-rows | grid-template-rows |
grid layout01
/*grid01 */
.grid01 {display: grid; grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% ; }
/*grid02 */
.grid02 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; }
/*grid03 */
.grid03 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; grid-gap: 2%; }
/*grid04 */
.grid04 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1fr 1fr 1fr ; grid-gap: 2%; }
/*grid05 */
.grid05 {display: grid;
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; */
/* grid-template-columns: repeat(8, 100px); */
grid-template-columns: repeat(8, 1fr);
grid-gap: 2%; }
.column05:first-child { grid-column: span 1/6;}
/* 여기서 1과 6에 의미는 1은 시작 스타트를 의미하는 것 6는 끝 엔드을(6 전까지 사용하겠다라는 느낌?) 의미하는 것이다.
span는 빈 공간을 의미*/
/*grid06 */
.grid06 {display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 2%; }
.column06:last-child { grid-column: 8/9;}
/*grid07 */
.grid07 {display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 2%; }
.column07:nth-child(1) { grid-column: 1/2;}
.column07:nth-child(2) { grid-column: 4/6;}
.column07:nth-child(3) { grid-column: 8/9;}