flex는 기존에 div 로 css의 향연을 하던 노가다와 불확실성에서 벗어나.. 박스의 공간 배치를 더 직관적으로 할 수 있는 예약어입니다.
예를 들어 아래와 같이 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
위와 같은 문서가 있다고 할때,
아래와 같이 CSS를 정의하면, item 클래스를 갖는 div를 수평 및 수직으로, 가운데 정렬할 수 있습니다. 무척 간단하죠.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #000;
padding: 20px;
}
.item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px 20px;
margin: 0 10px;
}
그렇다면, flex 가 적용되는 브라우저는 어떻것이 있을까요?
인터넷 익스플러러 (IE) : 아직도 쓰세요!?? @.@ - 11버전도 완전 지원 안됩니다.
크롬 : 29버전부터 완전 지원됩니다. (설정 -> Chrome 정보 보시면 됩니다. 29버전이면 2013년에 나온 버전입니다.)
Edge : IE대체제로 나온 브라우저이죠. flex 이후에 나와서 모든 버전에서 지원됩니다.
사파리 : 9 버전부터 지원됩니다. (2015년 10월 릴리즈)
파이어폭스 : 28버전 부터 지원됩니다. (2014년 3월 릴리즈)
오페라 : 17버전 부터 지원된다고 생각하는 편이 (2013년 10월 릴리즈)
아이폰 : iOS 9 이후 지원
안드로이드 크롬 : 126버전 이후, 2024년 6월 릴리즈
삼성인터넷 : 4버전 이후, 2016년 4월
오페라 미니 : 모든 버전 지원
오페라 모바일 : 12.1 버전 이후
안드로이드 브라우저 : 4.4 버전 이후 , 2013년
안드로이드 파이어폭스 : 127버전 이후
위의 버전 정보 굳이 외울필요는 없을 듯하고요.
쉽게 생각해서 대부분의 모던 브라우저는 다 지원된다고 생각하시면 됩니다.
자기 컴퓨터에서만 레이아웃이 깨지는 사람이 있으면, 업그레이드 하세요. 업데이트하세요 라고 말해도 이상하지 않은 상황이 되었습니다.
예전에 퍼블리싱할때, 모 대기업 팀장급 PC에서 화면이 깨져서. 0.x % 사용자를 대응하는 것이 아닌 것 같다고 했더니, 발끈 하시며, 대응하라고 하셨던 기억이 납니다. ㅎㅎㅎ
아무튼, 모던 브라우저 사용합시다..
끝..
'IT일반' 카테고리의 다른 글
| 크롬에서 인공지능 AI 바로 사용하기 (단축키) (0) | 2024.09.06 |
|---|---|
| 파리 올림픽 2024 폰트 다운로드 받는 곳 (0) | 2024.07.28 |
| 애플 M1 맥북에서 듀얼 모니터 사용하는 방법 (0) | 2024.07.01 |
| MariaDB/MySQL 데이터 추가 insert 문장 사용법 (0) | 2024.06.24 |
| AWS Elastic Beanstalk이란 무엇인가, 간단히 설명 (0) | 2024.06.21 |
