11/10 40-2 [CSS] FLEX_1[Container에 적용되는 속성]

도원결의 2022. 11. 10. 18:34

2022. 11. 10. 18:34

이론은 정리했으니 실전으로

받은 HTML문서

  <fieldset>
        <legend><h2>Flex Container의 display속성</h2></legend>
        <div class="container1">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
        </div>
        <hr/>
        <div class="container2" >
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 flex-direction속성</h2></legend>
        <div class="container3">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 flex-wrap속성</h2></legend>
        <div class="container4">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
          <div class="item">item6</div>
          <div class="item">item7</div>
          <div class="item">item8</div>
          <div class="item">item9</div>
          <div class="item">item10</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 justify-content속성(주축방향 정렬)</h2></legend>
        <div class="container5">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
          <div class="item">item6</div>
          <div class="item">item7</div>
          <div class="item">item8</div>
          <div class="item">item9</div>
          <div class="item">item10</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 align-items속성(교차축방향 정렬-한줄일때)</h2></legend>
        <div class="container6">
          <div class="item" style="font-size:.5em">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item" style="font-size:2em">item5</div>
          <div class="item">item6</div>
          <div class="item">item7</div>
          <div class="item">item8</div>
          <div class="item">item9</div>
          <div class="item" style="font-size:.5em">item10</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 align-content속성(교차축방향 정렬-여러줄일때)</h2></legend>
        <div class="container7">
          <div class="item" style="font-size:.5em">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item" style="font-size:2em">item5</div>
          <div class="item">item6</div>
          <div class="item">item7</div>
          <div class="item">item8</div>
          <div class="item">item9</div>
          <div class="item">item10</div>
          <div class="item">item11</div>
          <div class="item">item12</div>
          <div class="item">item13</div>
          <div class="item">item14</div>
          <div class="item" style="font-size:.5em">item15</div>
        </div>
      </fieldset>

아이템들은 보기쉽게 구분하기 위해 색을 입혀 줌

.item{
        background-color: green;
        border: 2px red solid;
        box-sizing: border-box ;
    }

1. display 속성 (flex 적용)

아니 또 헷깔려하는데

그 아이템들을 보지 말고 부모 !! 배경을 보소 !! 배경=컨테이너=box 가 블락 엘리먼트특성을 지녔다고오 !!!

.container1{
        background-color: bisque; 
        display: flex; /*블락엘리먼트 특성을 가진 컨테이너 생성*/
    }

2.display 속성(inline-flex적용)

얘랑 비교하면 확!!!! 알지

   .container2{
        background-color: pink;
        display: inline-flex; /*인라인E 특성을 가진 컨테이너가 컨텐츠 크기만큼 줄어듦!!!*/
    }

얜 부모인 배경이 아이템들(하나의컨텐츠로 처리 됨) 만큼 크기가 줄어듦! 인라인특성이지

3.flex-direction 속성 : 주축을 어디로 잡느냐??

row 는 가로방향

column은 세로방향

reverse는 순서를 반대로 !

	.container3{
        background-color: bisque;
        display: flex; 
        flex-direction: row;      /*  1. 기본값*/ 
        flex-direction: row-reverse ;  /*  2. 시작선이 오른쪽 끝*/
        flex-direction: column;      /*  3. 주축이 세로방향 시작선이 위*/
        flex-direction: column-reverse;    /*  4. 시작선이 아래*/
     }

4.flex-wrap 속성 : 브라우저 늘리고 줄일 때 컨텐츠들의 반응

 .container4{
     background-color: bisque;
     display: flex ; 
     
     flex-wrap: nowrap;     /*기본값 브라우저 줄여도 안내려감*/
     flex-wrap: wrap;       /* 줄이면 내려감 컨테이너도 줄어든다.*/
     flex-wrap: wrap-reverse;  /*줄이면 행이 위로 올라감*/
     flex-flow: row-reverse  wrap-reverse ;   /* direction, wrap 한꺼번에 지정 가능*/
    }

5. justify-content 속성 : 아이템들을 어떻게 배치할 거?

 .container5{
        background-color: bisque; 
        display: flex;  /*인라인 flex 일대는 적용 불가 (여유공간 없음 )*/
        justify-content: flex-start ;  /*왼쪽 정렬과 같음*/
        justify-content: flex-end;  /*오른쪽 정렬과 같음 */
        justify-content: center;    /*가운데 정렬  */
     
        justify-content: space-between ; /* 시작 끝 선에 각각 아이템 배치 그 사이는 균일한 공간*/
        justify-content: space-around ;  /*아이템 주위를 둘러싼  여백을 동일하게 공통여백일때 더 널널하겠지*/
        justify-content: space-evenly ;  /*모든 아이템간의 여백이 동일 */
}

얘도 특이한것 만 순서대로 space-between, space-around, space-evenly 적용

6.align-items 속성

    .container6{
        background-color: bisque; 
        display: flex; 
        height:  100px; 

        align-items: stretch;    /*기본이stretch 타이템들을 교차축방향으로 컨테이너를 늘려 */
        align-items: flex-start; /*교차축의 시작선을 기준으로 아이템 정렬 - 세로폭은 컨텐츠 크기만큼 위쪽 정렬!*/
        align-items: flex-end;  /*아래쪽 정렬 */

        align-items: center;   /*교차축 방향으로 가운데 정렬*/
        
        /*진짜 정 가운데 정렬할 때는 밑에 두가지를 같이 씀 !*/
         justify-content: center;
         align-items: center;
     
        align-items:baseline;  /*글꼴의 기준선인 baseline을 기준으로 아이템들을 정렬 글꼴 크기가 다를 때 의미있음 .*/
      }

7. align-content 속성 이건... 잘 안쓰니까 궁금하면 직접 해봐 ㅎㅎㅎㅎㅎㅎ

wrap;이 설정된 상태에서, 아이템들의 줄이 2줄 이상 되었을 때의 교차축을 따라 아이템들을 정렬하는 방식을 지정
속성값은 justify-content와 동일
아이템들이 한 줄일 경우 align-items 속성 사용

wrap일 때는 교차축 정렬은 align-content를 사용하자!

[요놈들은 컨텐츠모양은 제각각 줄 간격은 없음]
align-content:stretch ; 기본값
align-content:flex-start ;  여러줄이 여백없이 묶여서 위쪽 정렬
align-content:flex-end;   여러줄이 여백없이 묶여서 아래쪽 정렬
align-content:center; 여러줄이 여백없이 묶여서 가운데 정렬

[요놈들은 줄간격이 떨어지는데 컨텐츠들의 모양이 동일해짐]
align-content:space-between; 행이 컨텐츠가 되어서 행과 행 사이는 동일한 여백 정렬 (시작/끝선엔 붙고)
align-content:space-around; 각 행 주위에 동일 여백 여백이 중복일 땐 더 널널
align-content:space-evenly; 모든 여백이 다 동일 !!! 중복 무시

[요놈들은 컨텐츠모양도 제각각 줄 간격도 떨어짐 ]
align-items: flex-start;     시작선에서부터 정렬 o , 여러줄이 동일한 여백이 생김   align-content:flex-start ;랑 비교 !!
align-items: center; 여백생기고 가운데 정렬!!  align-content:center;랑 비교 !!!

'학원 > CSS' 카테고리의 다른 글

11/10 40-4 [CSS] FLEX를 이용하여 인터넷 사이트처럼 배치하기 (0)	2022.11.10
11/10 40-3 [CSS] FLEX_2[Flex Item에 적용되는 속성] (1)	2022.11.10
11/10 40-1 [CSS] FLEXBOX(이론정리) (1)	2022.11.10
11/09 39-6 [CSS] PositionTopLeft (0)	2022.11.10
11/4 36-9 [CSS] FloatClear (0)	2022.11.05

가장 평범한 블로그

11/10 40-2 [CSS] FLEX_1[Container에 적용되는 속성]

'학원 > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바