2023-05-29 flex , flex 가로 세로 정렬 , line-height

flex 는  지금 까지 배운것들을보다 훨씬 간편하고 용이하게 만들어줄수 있는 친구이다. 

 

결론부터 보자면 위에 사진은  flex 를 이용해서 만든  도형이다.  

div 는 원래 한줄에 쓰지 못한느 block 이다.  하지만 부모 엘리먼트에 display : flex 를 설정해주면  그 자식 엘리먼트들은 영향을 받게 된다. 그래서 저렇게 한줄로 있게되고 inline-block 을 썼을 때 처럼 다른 여백이 생기지 않아서 font-size 나 box-sizing 을 하나씩 적용해야하는 수고를 줄일수 있다.  그리고 자식들의 너비의 합이 부모보다 크게되더라도 줄바꿈되지않고  안에서 알아서 너비가 줄여진다. 

아래는 flex의 속성들이다.
flex-container 는 위에 그림에서 큰 빨간색 네모라고 생각하면되고  

flex-item 은  그안에 있는 파란색 네모라고 생각하면 된다. 

 flex-item은 브라우저에서 텍스트취급을 당하지 않는다.
- flex-item은 텍스트취급받지 않기 때문에, text-align을 사용할 수 없다.
- flex-item은 후손까지 영향이 가지 않는다.(flex-container를 기준으로
후손엘리먼트는 flex-item이 아니다.)
- flex-item은 flex-shrink라는 속성이 1로 되어있기 때문에
부모너비를 넘어서도 줄바꿈되지 않고 유연하게 줄어든다.
이때 flex-shrink속성값을 0으로 바꾸게 되면 flex-item은 부모너비를 넘어서 튀어나오게 된다. 단, 줄바꿈 되지는 않는다.
- 한줄에 같이 나와야하는 태그들을 감싸고 있는 부모엘리먼트에 display: flex를 적용한다.
- display: flex; 적용한 태그는 flex-container라고 부른다.
- display: flex; 적용한 태그에 자식은 flex-item이라고 부른다.
- 후손은 flex-item에 대한 영향을 받지 않는다.
- flex-item끼리는 여백이 생기지 않는다.
- flex-container가 flex-item을 조종하는 개념으로 생각하면 쉽다.

 

flex 가로 정렬 

 

위에는 flex-item 을 가로 정렬 해준 그림이다. 

 

flex가로 정렬
왼쪽 정렬 : justify-content: flex-start;
중앙 정렬 : justify-content: center;
오른쪽 정렬 : justify-content: flex-end;

- flex는 생략해도 된다.
- flex-start는 left도 사용가능하다.
- flex-end는 right도 사용가능하다.

마진 값을 변경해주지 않아도 이제 이 속성들을 통해 가로 정렬이 가능하다. 

 

 

flex 세로 정렬

 

가로 정렬을 배웠으니 이제 세로 정렬을 배울 차례이다.

align-items :  center (start ,  end    위  아래  )    를 써주면 끝이다 ! 간단! 

그래서 가로 세로 모두 center 를 해주면 정중앙 정렬이 가능해진다.   

주의할 점은  가로 나 세로 정렬 속성 모두  flex-container 에 써야된다.!!!    

 

 

 

 

 line-height

 

 

 

 

[line-height 특징] 

1.진짜 텍스트한테만 사용할 수 있다.
2.inline, inline-block에는 사용할 수 없다.
3.텍스트는 line-height 중앙에 배치된다.
4.값을 자유롭게 커스텀할 수 있다.

 

 

 

텍스트에 상위엘리먼트만큼 텍스트가 높이를 가지고 세로중앙정렬을
하려면 상위엘리먼트만큼 텍스트에 line-height을 적용한다.  

위에 그림에  section 의 높이가 100px 이기에  똑같이 line-height 를 100px 로 설정한것이다.