[수업 아홉번째 시간] 웹린이의 아홉번째 html 수업 시간

 

**Flex(Flexible Box, Flexbox) 속성(부모요소에 줌, 자식요소가 정렬됨)

1. 아이템들을 가로 방향으로 배치
2. 내용물만큼 width 적용(=inline)
3. 아이템들의 height가 모두 컨테이너의 높이만큼으로 자동 적용(float은 각각의 콘텐트만큼 높이 설정)

(☆부모요소한테 적용시켜도 자식요소에만 적용이됨)

*Flex Container(플렉스 컨테이너)
1. flex의 영향을 받는 전체 공간

*Flex Item(플렉스 아이템)
1. 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것

<div class="container">
    <div class="item">helloflex</div>
    <div class="item">abc</div>
    <div class="item">helloflex</div>
</div>

container{
    display:flex
}

 

 

 

**Flex 컨테이너 속성

1. flex direction : 배치 방향 설정
 - row / row-reverse / column / column-reverse

 2. flex-wrap : 아이템 줄바꿈 설정
  - rowrap / wrap / wrap-reverse

3. flex-flow : flex-direction과 flex-wrap을 한 번에 지정

4. justify-content : 수평축 방향으로 아이템 정렬
 - flex-start / flex-end / center / space-between / space-around / space-evenly

5. align-items : 수평축 방향으로 아이템 정렬
 - stretch / flex-start / flex-end / center / baseline

6. align-content : flex-wrap: wrap이 설정된 상태에서 아이템들의 행이 2줄 이상인 경우 수직축 방향 정렬 지정
 - stretch / flex-start / flex-end / center / space-between / space-around / space-evenly 

 

 

float보다 좋아진 속성 -> flexbox

 

---