flex :엘리먼트들의 간격을 나눌때 사용한다.
1.부모 > 자식 = 반드시 부모 에게 flex를 적용시켜준다.
2.자식에게 float:left; 를 적용시킨 것 처럼 왼쪽정렬된다.
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
[F12]로 정렬 예시를 찾아 볼 수 있음.
<예제> 아래 그림처럼 로고+메뉴가 있는 헤더를 만들어 보자.
<예제 풀이>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.con_wrap {
width: 600px;
height: 600px;
border: 10px solid gray;
display: flex;
/*
=>요소를 flex속성으로 변경
=>반드시 부모에게 적용시켜 줘야지만 자식이 배치된다.
=>자식들에게 float left 지정한것처럼 왼쪽으로 정렬됨 */
flex-direction: row;
/* 축을 기준으로 위치가 변경됨
=> row : 기본값 (왼쪽->오른쪽)
=> row-reverse : row반대 (왼쪽<-오른쪽)
=> column : (위->아래) 축 배치
=> column-reverse : (아래->위) 축 배치
=> */
justify-content: center;
/* => flex의 축을 기준으로 수평방향 정렬 배치
=> center : 부모기준 가운데 정렬
=> space-between : 사이간격만 배치
=> space-around : 양쪽 끝 간격 동일하게 간격배치
=> space-evenly : 모든 간격 동일하게 간격배치
=>flex-start : flex 의 시작을 기준으로
=> flex-end : flex의 끝을 기준으로
*/
align-items: center;
/* => 축을 기준으로 수직방향으로 정렬
=> 축이 한줄일때 많이 사용
=>flex-start : flex 의 시작을 기준으로
=> flex-end : flex의 끝을 기준으로
=> center : 가운데 정렬 */
flex-wrap: wrap;
/* =>wrap 은 자식요소들의 크기가 부모보다 클때
자식 요소들이 여러줄로 표현되게 만들고 싶을때 사용한다.
=> 부모크기 기준으로 자식정렬이 들어간다.
=> 기본값은 no-wrap 이며, 축 안에 자식요소들의 크기가 줄어들어서 다 찌그러져서 들어간다.*/
align-content: space-between;
/* => 축이 세로로 어려줄일때 사용함. */
}
.con {
width: 100px;
height: 100px;
border: 3px solid blueviolet;
font-size: 30px;
}
</style>
<!-- 부모 > 자식 = 부모에게 flex를 적용해줌. -->
</head>
<body>
<div class="con_wrap">
<div class="con">1</div>
<div class="con">2</div>
<div class="con">3</div>
</div>
</body>
</html>
'언어 > HTML & CSS' 카테고리의 다른 글
| 응용) CSS (반응형 웹 만들기, 가변성, 단위em,rem,vw,vh) (0) | 2023.11.27 |
|---|---|
| 응용) HTML 과 CSS (폼태그 속성, form tag ,form 태그,로그인 만들기) (0) | 2023.11.17 |
| 응용) HTML 과 CSS (애니메이션 속성) (0) | 2023.11.15 |
| 입문) HTML 과 CSS (반응형 12칼럼 그리드 만들기) (0) | 2023.06.29 |
| 입문) HTML 과 CSS (반응형 그리드 , 범용클래스 ) (0) | 2023.06.28 |
