[Bootstrap] 레이아웃 / CSS3 flex-1 / direction / wrap

.

CSS flex

CSS3 flexbox layout은 웹페이지의 컨테이너에 아이템의 폭과 높이 또는 순서를 변경해서 웹페이지의 사용 가능한 공간을 최대한 채우고 이를 디바이스 종류에 따라 유연하게 반영하도록 도와준다. 그러나,
flexbox는 레이아웃의 방향성이 일방적이기 때문에 단일 프로퍼티와 벨류값으로 웹페이지 전체를 디자인하지 못하는 단점이 존재한다. 이를 보완하기 위해 최근 3D 디자인을 만들 수 있는 grid layout이 개발되어 css flexbox에 비해 엘리먼트의 중첩 등 좀 더 다양한 디자인이 가능하다.

.

flex 적용 전

<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div> 
  </div>

div container 안에 10개의 item div 들이 있을 때, 브라우저에서 보면 다음과 같다.

container 클래스 flex 적용 전

data-ke-size="size16">각각의 item을 구분 하기 위해 배경색을 넣음
위에서 부터 가로 방향의 엘리먼트가 표현

.

flex 적용

위에서 

.container{
	display: flex;
}​

스타일을 추가하게 되면, 

container 클래스 flex 적용

div들이 작아지면서 가로 방향으로 표시 된다. (display flex 가 디폴트로 세팅된 모습)

container  클래스에

.container {

  display: flex;  

  border : 10px solid royalblue;

}

를 추가해서 컨테이너 박스의 전체 크기를 경계로 확인해 보면,

container 클래스 경계 표시

푸른색의 경계 테두리들이 화면 전체를 싸고 있는 것을 볼 수 있다. 

여기서 display: flex 를 display: inline-flex 라고 하면,

.container {
  /*display: flex;*/ 주석
  display: inline-flex;  
  border : 10px solid royalblue;
}

container 클래스 inline-flex 적용

컨테이너 영역이 아이템 div 들의 전체 영역과 일치하게 된다.
즉, flex 영역을 블록으로 쓰지 않고 illine block 으로 사용하는 것이다.

 

.

flex direction

.container {
  display: flex;  
  border : 10px solid royalblue;
  flex-direction:row;
}

container 클래스 flex-direction: row

.container {
  display: flex;  
  border : 10px solid royalblue;
  flex-direction:column;
}

container 클래스 flex-direction: column

.container {
  display: flex;  
  border : 10px solid royalblue;
  flex-direction:row-reverse;
}

flex-row 역순

.container {
  display: flex;  
  border : 10px solid royalblue;
  flex-direction:column-reverse;
}

flex-column 역순

.

flex-wrap

아이템들의 width 값을 주었을 때, flex는 반응적으로 브라우저의 가로 폭에 아이템들을 맞춰주고 있기 때문에 아이템의 width 값을 주었을 때 아무런 변화가 없다. 

.container{
	display:flex;
	border : 10px solid royalblue;
 }
  
.item{
	width: 500px;
}

item 의 width 값을 주어도 변화가 없는 container 클래스

그런데, flex- wrap: wrap 을 하게 되면 아이템 값들의 width 값을 주었을 때, 해당 width 값을 가지게 되고, 브라우저의 width 값을 넘어 서게 되면 다음 줄로 넘어 가게 된다.

.container{
    display:flex;
    border : 10px solid royalblue;
    flex-wrap:wrap
 }
  
.item{
	width: 500px;
}

flex-wrap을 적용한 container 클래스

flex-wrap: nowrap 을 하면 처음의 display: flex 형태로 된다.

.container{
    display:flex;
    border : 10px solid royalblue;
    flex-wrap:nowrap
 }
  
.item{
	width: 500px;
}

flex-wrap:nowrap container 클래스

.

display: flex

display: flex;

라는 한줄의 property 와 value 는

flex-direction: row;
flex-wrap: nowrap;

을 모두 함축하고 있는 것이기 때문에

flex-flow : row nowrap;

이렇게 css 숏컷(축약구문) 형식으로 한줄로 기록해도 된다.

 

참고

https://espania.tistory.com/360

[Bootstrap] 레이아웃 / display(d-none, invisible)

https://espania.tistory.com/142

[Bootstrap] 레이아웃 / display(d-flex)

https://jsbin.com/qecowivuva/edit?html,output 

JS Bin

https://css-tricks.com/snippets/css/a-guide-to-flexbox/%EF%BB%BF