1. inline-flex : 안에 들어가는 것이 inline 형식의 태그(a, span 같은 것들)
2. flex : 일반적인 사용법
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
ol, ul { list-style:none; margin: 0; padding: 0;}
.s1{
}
.s1 ul{
display:flex; /* 자식노드들이 flex 하게 나열되는 설정 */
flex-direction: row;
height :300px;
/*flex-direction: column; /* 축방향 지정, 밑으로 적재*/
/*flex-direction: row;*/ /* 옆으로 좌측부터 적재 */
/*flex-direction: row-reverse; */ /*옆으로 우측부터 적재 */
/*flex-wrap:nowrap; /*화면 영역을 벗어나면 줄바꿈을 통해 적재되는 것을 막음, 스크롤바 생김
가로 슬라이드 형식으로 보고 싶을 때 사용 가능*/
/*flex-wrap:wrap; /*화면 영역을 벗어나면 줄바꿈을 통해 적재/*
/* direction이 column이면 의미 없음, 아래로 계속 스크롤이 가능하므로.*/
/* 부모 노드가 높이를 지정했다면, 의미 있음. 밑으로 적재하는 경우, 우측 상단으로 줄바꿈*/
/* grow 옵션 설정하면 공백을 꽉 채우면서 적재*/
/*flex-flow:column wrap; /* direction과 wrap을 축약 표현*/
/*justify-content:center; /*가로 정렬방식, 자식노드들이 가운데로 정렬됨*/
/*justify-content:flex-start; /*가로 정렬방식, 자식노드들이 측 시작부분으로 정렬됨*/
/*justify-content:space-between; /*가로 정렬방식, 자식노드들이 균일한 간격으로 정렬됨, 바깥의 공백 없이.*/
/*justify-content:space-around; /*가로 정렬방식, 자식노드들이 균일한 간격으로 정렬됨, 바깥의 공백 있음.*/
/*justify-content:space-evenly; /*가로 정렬방식, 자식노드들이 균일한 간격으로 정렬됨, 바깥의 공백 있음. 바깥의 공백도 동일 간격*/
/*align-items:strecth; /* 세로 정렬방식, 자식들이 부모의 높이만큼 채울 것*/
/*align-items:center; /* 세로 정렬방식,자식이 부모의 가운데로 정렬*/
/*align-items:baseline; /* 세로 정렬방식,자식이 부모의 가운데로 정렬, 글자의 폰트 베이스라인 위치에 맞춤*/
/*align-items는 wrap이 되어 여러 줄이 될 경우 각 줄마다 각각 적용됨*/
/*align-content:center; /*align-items와 달리 align-content는 자식노드들이 뭉침,
각 줄마다 적용되는 것이 아님, 공백은 공동의 것이 됨*/
align-content:space-between; /*세로 정렬, 자식노드들이 균일한 간격으로 정렬됨, 바깥의 공백 없이.*/
align-content:space-around; /*세로 정렬, 자식노드들이 균일한 간격으로 정렬됨, 바깥의 공백 있음.*/
align-content:space-evenly; /*세로 정렬, 자식노드들이 균일한 간격으로 정렬됨, 바깥의 공백 있음. 바깥의 공백도 동일 간격*/
background:gray;
}
.s1 li{
flex-basis:100px; /* 축 방향으로 너비나 높이를 지정할 때 사용, 미설정 시 기본값 0*/
/*flex-grow: 1; /* 여기 지정하니 같은 비율로 객체들이 공백을 나누어 가짐, 설정하지 않으면 기본값 0*/
flex-shrink:0; /* 설정하지 않으면 기본값 1, 화면이 줄어들 때, 지정한 크기보다 작게 줄이기 않음*/
/* 계속 줄이면 크기는 유지하고, 화면 밖으로 노드들이 벗어남*/
/* 하나의 노드에만 지정하면 그것만 최소 크기를 유지함*/
/*flex:1 1 100px; /* grow, shrink, basis 순으로 축약하여 표현 가능 */
/*flex:none; /* flex: 0 0 auto; 크기 변동 비허용*/
/*flex:auto; /* flex: 1 1 auto; 크기가 커졌다 작아졌다*/
/*flex:inital; /* flex: 0 1 auto; 줄어들기만 가능*/
/*flex:100px; /* flex: 1 1 100px; 구글에서 flex mdn 검색해보면 참고가능*/
}
.s1 li:nth-child(1){
background:red;
/*flex-grow: 1; /* 축 방향으로 남은 공백을 지정 비율 만큼 나누어 가지라는 것 */
/* 여기에만 지정하면 혼자서 다 가지라는 것, 혼자 가질 때는 숫자는 의미 없음 */
align-self:flex-start; /* 세로 정렬방식, 지정된 자식 노드만 축 시작 방향으로 정렬*/
order:2;
}
.s1 li:nth-child(2){
background:green;
align-self:flex-end; /* 세로 정렬방식, 지정된 자식 노드만 축 끝 방향으로 정렬*/
order:1; /* 배치 순서를 정할 수 있음*/
}
.s1 li:nth-child(3){
background:blue;
order:3;
}
.s1 li:nth-child(4){
background:yellow;
order:4;
}
.s1 li:nth-child(5){
background:lightblue;
order:5;
}
</style>
</head>
<body>
<section class="s1">
<h1>flex box</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</section>
</body>
</html>
'FrontEnd' 카테고리의 다른 글
| CSS - Position (0) | 2023.01.27 |
|---|