'Flex' 태그의 글 목록

Flex

3. 자식 요소들의 배치를 편리하게 해줄 flex 2018.09.23
화면의 Layout을 그리는 Flex에 대하여... 2017.06.04

3. 자식 요소들의 배치를 편리하게 해줄 flex

2018. 9. 23. 15:02

[ 3. 자식 요소들의 배치를 편리하게 해줄 flex ]

: float를 이용해 요소들을 배치할 경우 box-sizing:border-box 등 margin, padding 등에 따른 배치를 구성하기가 기존에는 까다로웠지만 최근에는

flex를 이용해 편리하게 배치할 수 있다.

<!DOCTYPE html>

<head>

flex를 사용함으로써 자식요소에 일일이 CSS 스타일을 적용할 필요가 없다.

-> 부모 요소에만 적용하면 된다.!(엄청나군...)

.father{ /* 자식요소들의 배치는 부모에서만 지정하면 됨... */

display : flex; /*flex를 이용하겠다.*/

justify-content: flex-start;

justify-content 속성 : 요소들의 가로 정렬을 담당한다.(만약 flex-direction:column으로 된 경우 세로 정렬을 담당하게 됨.)

justify-content: center // 중앙 정렬

: flex-start // 왼쪽(만약 flex-direction:row-reverse일 경우 오른쪽 정렬)

: flex-end // 오른쪽 정렬(만약 flex-direction:row-reverse일 경우 왼쪽 정렬)

: space-between // 자식 요소들 사이 간격이 일정하게 배치 됨.

: space-around // 자식 요소 주변 공간이 일정하게 배치 됨.

align-items: center;

align-items 속성 : 요소들의 세로 정렬을 담당한다.(만약, flex-direction:column일 경우 가로 정렬을 담당하게 됨)

align-items : center // 세로 중앙 정렬

align-items : baseline // 세로 시작 지점부터 배치

align-items : stretch // 쭉 당겨서 첨부터 끝까지 닿도록 배치

align-items : flex-start // top부터 정렬 (만약 flex-direction:column-reverse일 경우 아래부터 정렬)

align-items : flex-end // bottom부터 정렬(colum-reverse일경우 위부터 정렬)

flex-direction:row;

flex-direction 속성 : flex 자식들의 배치 방향을 결정지음

flex-direction : row // 왼쪽부터 오른쪽으로 수평 배치 1,2,3,4,...

flex-direction : row-reverse // 수평배치하되 거꾸로 4,3,2,1 로 배치

flex-direction : column // 수직으로 배치

flex-direction : column-reverse // 수직으로 배치하되 역순으로 배치

flex-wrap: wrap;

flex-wrap 속성 : 화면을 축소할 경우 자식들의 배치를 어떻게할 것인가를 결정 지음

-> 따로 설정하지 않으면 default가 flex-wrap : nowrap임 따라서, 배치된 그 상태로 크기를 줄여가며

배치는 바끼지 않도록 줄어들게 됨

flex-wrap : wrap; // 으로 지정시, 웹브라우저를 축소해 배치가 깨지게 되면 자동으로 아래로 내려가도록 함

}

.box{ /* 자식 요소들은 그냥 크기 정도만 설정하면 됨... */

width:200px;height:200px;background-color:yellow;margin-top:5px;margin-right:5px;

}

</style>

</head>

<body>

</div>

</body>

</html>

-> 추가적으로 flex를 연습해볼 수 있는 사이트

http://flexboxfroggy.com/#ko

저작자표시 비영리

'스터디 > CSS관련 Tip' 카테고리의 다른 글

4. CSS animation (0)	2018.09.23
2. CSS3의 transform을 통한 요소 변형, 위치 제어 (0)	2018.09.23
1. CSS 관련 Tip(반응형 제작 포함) 정리 (0)	2018.09.23

화면의 Layout을 그리는 Flex에 대하여...

2017. 6. 4. 03:18

[ Flex ]

기존의 table이나 div를 쓰고 position Float를 사용하던 방식에서 벗어나 Flex를 이용한 레이아웃을 구성하는 방법에 대해서알아봅시다.

1. flex 기본(display:flex, flex-direction, flex-basis) & flex-grow, flex-shrink 속성

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Flex Study</title>
    <style media="screen">
      .container{
        background-color:powderblue;
        display:flex; /* Flex를 사용하려면 container(부모)에 display:flex를 지정해줘야함 */
        flex-direction:row; /* 행으로 정렬 */
        /*flex-direction:column;  수직 정렬 */
        /*
          - 행정렬일 떈 각 자식 element는 수직을 꽉 채우고
          - 수직 정렬일 땐 각 자식 element는 행을 가득 채운다.
        */
        height:200px;
      }
      .item{
        background-color:tomato;
        color:white;
        border:1px solid white;
        flex-grow:1; /* 안드로이드의 weight와 유사(차지하는 비율을 지정) */
      }
      .item:nth-child(2){
        /* flex-basis:200px; /* 자식의 기본 크기 지정 */
        flex-grow:2; /* 2번째 자식은 2비율만큼 차지하도록 함 */
      }
      .item:nth-child(1){
        flex-basis:150px;
        flex-shrink: 1;
        /*
          flex-shrink는 grow와 반대로
          flex-basis 값이 지정되어 있는 상태에서 이 크기보다 창크기를 작게해 줄어들어야하는 경우
          줄어드는 비율을 지정하게 된다.
          0으로하면 안줄어들고
          두군대서 각각 1, 2로해놓으면 첫번째는 3분의 1속도로 줄어들고 2번째는 3분의 2속도로 줄어든다.
        */
      }
    </style>
  </head>
  
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>

2. 위에서 공부한 속성을 활용해서 대표적인 레이아웃 디자인인 Holy Grail Layout을 구성해보도록 하자.

이러한 구조를 만들어 볼 건데

먼저, (Header), (Nav, Main, AD), (Footer)로 구성되어 있다.

크게 태그로

1) header, section, footer 시멘틱 태그로 구성하고 section에는 nav, main, aside(광고부분) 시멘틱 태그를 배치한다.

</section>

</div>

2) 먼저 Flex를 사용하기 위해 가장 부모인 container에 플렉스를 사용하겠다고 display:flex를 지정한다.

그리고, 그 자식들은 수직으로 배치되어야 함으로 flex-direction:column을 지정해 준다.

3) 헌데 section 태그 내의 자식들(nav,main,aside)는 가로로 배치되어야한다.

따라서, 그들의 부모인 section에 flex를 사용하기 위해 display:flex를 지정하고, flex-direction:row를 지정한다.

4) 마지막으로, 화면을 줄여도 nav부분과 aside부분은 줄어들지 않기 위해서 flex-shrink를 지정할 건데

지정하지 않을 경우 flex-shrink:1 로 되어있다. 따라서 나머지 부분은 그대로 두고

nav와 aside만 flex-shrink:0 을 지정해 창을 줄여도 그 크기는 줄어들지 않도록 설정하도록 한다.

또한 nav와 aside는 일정 크기를 가지도록 flex-basis:150px; 정도를 할당하도록 하자.

5) 기타사항

만약, section 태그 내에서 지금은 nav, main, aside 순으로 되어 있는데 이 순서를 main nav aside로 바꾸고 싶은 경우는 어떻게 할까

태그의 위치를 바꿀 수도 있지만 order라는 속성을 사용하면 된다.

main{

order:0;

}

nav{

order:1;

}

aside{

order:2;

}

로 지정하면 된다.

Ex)

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Holy Grail Layout</title>
    <style media="screen">
      .container {
        display:flex;
        flex-direction: column;
      }
      header{
        border-bottom: 1px solid gray;
        padding-left:20px;
      }
      footer{
        border-top:1px solid gray;
        padding:20px;
        text-align: center;
      }
      .content{
        /* 배치하고자하는 자식들의 부모에 display:flex를 항상줘야함 */
        display:flex;
      }
      .content nav{
        border-right:1px solid gray;
      }
      .content aside{
        border-left: 1px solid gray;
      }
      nav,aside{
        /* 화면이 줄어들어도 nav와 ad부분은 줄어들지 않도록... */
        flex-basis:150px;
        flex-shrink: 0;
        /* 중간에 main만 줄어들게 됨 */
      }
      main{
        padding:10px;
      }
    </style>
  </head>
  
    <div class="container">
      <header>
        <h1>생활코딩</h1>
      </header>
      <section class="content">
        <nav>
          <ul>
            <li>html</li>
            <li>css</li>
            <li>javascript</li>
          </ul>
        </nav>
        <main>
          생활코딩은 일반인을 위한 코딩 수업입니다.
        </main>
        <aside>
          광고
        </aside>
      </section>
      <footer>
        <a href="https://opentutorials.org/course/1">홈페이지</a>
      </footer>
    </div>

저작자표시 비영리

'개발 > css' 카테고리의 다른 글

float 속성과 float를 이용한 Holy Grail Layout (0)	2017.06.04
반응형 웹의 핵심 media Query (0)	2017.06.04
position offset에 대해서... (0)	2017.06.03
layout 관련 속성 (0)	2017.06.03
폰트 곤련 속성 및 외부 폰트 설정하기 (0)	2017.06.03

PREV 1 NEXT

악덕고용주의 개발 일기

Flex

3. 자식 요소들의 배치를 편리하게 해줄 flex

'스터디 > CSS관련 Tip' 카테고리의 다른 글

화면의 Layout을 그리는 Flex에 대하여...

'개발 > css' 카테고리의 다른 글

+ Recent posts

티스토리툴바