flex Box 모델
기존에 사용하던 inline inline-block , table 등이 아닌 flex라는 모델이 CSS3에서 도입되었습니다.
flex에서 가장 좋았던 점은 세로 수직 정렬이든 여러 정렬등이 너무 편리하게 동작할수 있다는 점이고
flex박스에 장점은 동적은 변경 가능한 순서를 지정하고 사용할 수 있는 공간내에서 자동으로 너비와 높이를 지정 할 수 있습니다.
이제부터 flex display 로만 화면을 구성해볼겁니다.
아래의 화면도 전부 flex로 구성되어있으며 아래 화면에 대한 html 코드 리뷰를 하고
다음 포스팅부터는 flex의 속성 하나하나 훑어볼 예정입니다.
기준은 Chrome을 기준으로 하겠습니다. IE에 대한 트러블 슈팅은 따로 ..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS3 FlexBox </title>
<head>
<style>
/* padding 및 border를 width 와 height 에 포함한다. margin X > box-sizing:border-box */
*{
box-sizing:border-box;
}
html,body{
display:-webkit-flex;
display:flex;
flex-wrap:wrap;
-webkit-flex-wrap:wrap;
width:100%;
height:100%;
padding:0;
margin:0;
}
header{
width:100%;
height:80px;
background-color:#DAD9FF;
}
div#bodyLayout{
display:flex;
width:100%;
height:calc(100% - 180px);
}
nav {
display:flex;
width:10%;
height:100%;
background-color:#4641D9;
color:white;
}
article{
display:flex;
width:90%;
height:100%;
background-color:#FFD9EC;
border : solid 3px black;
overflow-y: auto;
}
footer{
width:100%;
height:100px;
background-color:orange;
}
</style>
<body>
<header>
header 태그입니다.
</header>
<div id="bodyLayout">
<nav>
<ul>
<li>nav Tag</li>
</ul>
</nav>
<article>
flex 테스트 본문입니다.
</article>
</div>
<footer>
footer 입니다.
</footer>
<script>
window.addEventListener('load',function(){
console.warn('onLoad flexBox Test')
});
window.addEventListener('unload',function(){
alert("unLoad flexBox Test");
});
/*
load = 페이지를 전부 다 읽어 들인 후 발생
unload = 페이지로부터 빠져나갈때 빨생
*/
</script>
</body>
</html>
flex-wrap : body랑 html 에 해당 flex-wrap:wrap
을 지정한 이유는 기존의 inline-block 이나 inline, block 을 통해서 적용시 였으면
header가 100%로 잡혀있고 div는 기본 block 형식이니 화면을 꽉채울거라 생각 했지만
flex의 경우 flex-wrap 이 기본(default)이 nowrap 으로 되어있다보니
지정을 안할시에는 이와같이 나타납니다. 위의 코드를 받아서 지워보시고 확인해 보시면 됩니다.
nowrap 은 한정된 영역내에서 자동으로 너비와 높이를 잡아 주게 되며
flex-wrap 을 wrap 으로 지정하게되면 맨 처음 사진과같이 넘치면 아래줄로 넘기게됩니다.
그래서
width 기준
[ Header 100% ]
[ nav 10% article 90% ]
[ footer 100% ]
을 가지게됩니다. 또한 * {
box-sizing:border-box; 부분은 왜 했을까 할수도있는데요
}
article을 보시면 border 에 3px가 들어가있습니다. border-box가 아닌 일반 박스모델에서 는 width 90% 를 하였어도 border를 지정하면 해당값을 제외 하고 계산하기때문에 넘쳐서 아래로내려가는 현상이 발생합니다.
box-sizing을 지우니 해당과같이 아래의 border가 덮여지게됩니다.
이것을 해결하기 위해 width 에 border를 포함하는 방법이 box-sizing: border-box입니다. 모든 레이아웃에
적용하기 위해서 *{ }를 지정하였습니다.
지정하게되면 이와같이 사이즈에 포함 시키기 때문에 문제가 발생하지않습니다.
box-sizing을 따로 작성하도록 하며 border-box는 border와 padding만 계산하고 margin 은 계산하지 않기 때문에
margin 에 대한 처리는 따로 해주어야 합니다.
이후 포스팅은 분홍 부분에다가 관련 코드를 작성 하도록 하겠습니다.
이외에 flex 에 대한 설명이 있는 사이트가 있는데 링크 남깁니다.
* 너무 잘되어있어서 이거보다 자세히 설명은 ..
// flex 설명
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.beautifulcss.com/archives/2812
// flex 구버전 사용
https://css-tricks.com/using-flexbox/
'Web(Front-End) > CSS3 & HTML5' 카테고리의 다른 글
| [CSS3] flex Box - justify-content, align-items (0) | 2018.08.16 |
|---|---|
| [CSS3] flex Box - flex-wrap (줄 넘기기 ) && flex-flow (방향 + 줄 넘기기) (0) | 2018.07.24 |
| [CSS3] flex Box - flex-direction (생성 방향) (0) | 2018.07.23 |
| [HTML5] OverView (0) | 2018.06.26 |
| [CSS] display - inline,block,inline-block (0) | 2018.06.21 |