안녕하세요 flexBox Model 중
flex-direction( 플렉스 - 방향 ) 에 대해서 작성 하려고 합니다. ( 테스트한 전체 코드는 포스팅 하단에 있습니다. )
flex-direction
flex-direction 이라 함은 컨테이너 내부의 아이템들이 만들어지는 방향을 뜻 합니다.
안의 초록 박스가 Items (이후에도 계속 해당 방식으로 작성 하려고합니다. )
겉의 빨간 줄? 로 덮여진 박스가 Container 라고 보시면 됩니다.
1. row (default)
좌 -> 우로 만들어지는 방식이며
<container>
<box>
<box>
<box>
<box>
</container> 상태에서 <box>태그를 하나 더 추가한다면 점선으로 되어있는 쪽에 추가가 될 것입니다.
- 결과 화면
2. row-reverse
row의 리버스 형태로 우 -> 좌로 만들어지는 형태입니다. 아이템을 추가할때 마다 우측에서 붙습니다.
- 결과 화면
3. column
위 에서 아래로 붙습니다. 새로운 아이템 추가시 위 부터 차례로 붙습니다.
- 결과 화면
4. column-reverse
column 의 리버스 형태로 아래에서 위로 생성 됩니다. 새롭게 생성되는 아이템은 가장 최상단 부터 생성됩니다.
- 결과 화면
확인 코드 (html) 그대로 복붙 하셔서 test.html 로 만들면 됩니다.!
<!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{
display:flex;
flex-direction:row;
width:100%;
height:80px;
background-color:#DAD9FF;
text-align:center;
}
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;
flex-direction:column;
width:90%;
height:calc(100%);
background-color:#FFD9EC;
border : solid 3px black;
padding: 15px;
overflow-y:auto;
}
article .block{
display:flex;
flex-direction:row;
align-items :center;
border : solid 2px #FF007F;
padding :2px;
width:100%;
min-height:80px;
overflow-x:auto;
overflow-y:hidden;
margin-bottom:3px;
font-size:12px;
font-weight:700;
}
article .columnblock{
display:flex;
flex-direction:row;
align-items :center;
border : solid 2px #FF007F;
padding :2px;
width:100%;
min-height:200px;
overflow-x:auto;
overflow-y:hidden;
margin-bottom:3px;
font-size:12px;
font-weight:700;
}
article span{
line-height: 30px;
display:inline-block;
vertical-align:middle;
background-color:aquamarine;
text-align:center;
height:30px;
width:30px;
margin:5px;
}
footer{
width:100%;
height:100px;
background-color:orange;
}
</style>
<body>
<header>
header 태그입니다.
<div style="display:flex;width:250px;height:50px; border : solid 2px #FF007F;
align-items:center;align-self:center;justify-content:center;margin:0px 50px 0px 0px;
font-size:10px;font-weight:600;">
flex-Container 테스트
</div>
<div style="display:flex;width:250px;height:50px; border : solid 2px #E1FF36;
align-items:center;align-self:center;justify-content:center;
font-size:10px;font-weight:600;">
flex-Items 테스트
</div>
</header>
<div id="bodyLayout">
<nav>
<ul>
<li>nav Tag</li>
</ul>
</nav>
<article>
<div class="block">
<div style="display:flex">
<span></span><span></span><span></span><span></span>
</div>
display:flex
</div>
<div class="block">
<div style="display:flex;flex-direction:row">
<span>A</span><span>B</span><span>C</span><span>D</span>
</div>
display:flex </br>
flex-direction : row (default)
</div>
<div class="block">
<div style="display:flex;flex-direction:row-reverse">
<span>A</span><span>B</span><span>C</span><span>D</span>
</div>
display:flex</br>
flex-direction : row-reverse</br>
</div>
<div class="columnblock">
<div style="display:flex;flex-direction:column">
<span>A</span><span>B</span><span>C</span><span>D</span>
</div>
display:flex</br>
flex-direction : column</br>
</div>
<div class="columnblock">
<div style="display:flex;flex-direction:column-reverse">
<span>A</span><span>B</span><span>C</span><span>D</span>
</div>
display:flex</br>
flex-direction : column-reverse</br>
</div>
</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>
'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 Model (0) | 2018.07.02 |
| [HTML5] OverView (0) | 2018.06.26 |
| [CSS] display - inline,block,inline-block (0) | 2018.06.21 |