📍display: flex;

📌1. flex-direction(방향) : flex item들을 수평(row)으로 정렬할지 세로(column)으로 정렬할지 선택하는 속성

flexbox를 활용하기 위해서는 부모에 필수적으로 달아줘야하는 CSS 속성이 있습니다. 아래 속성들은 부모 엘리먼트에 적용해야한다!
display: flex;

• flex 레이아웃을 적용
  flex-direction : row; (row || column || row-reverse || column-reverse)
• 내부 요소들의 정렬 방향
• row 는 가로방향 정렬
• column 은 세로방향 정렬
• reverse 는 각 방향의 반대에서 부터 정렬됨.

📌justify-content:축 수평방향 정렬

• flex-start : flex 방향 시작점 기준 (기본값)
• flex-end : flex 방향 끝점 기준
• center : 중앙 정렬
• space-between : flex 방향 양 끝점 기준 (양 끝에 붙혀서)
• space-around : flex 방향 중앙점과 양 끝 기준 (양 끝과도 간격을 둠)
  

📌align-items : 축 수직 방향 정렬

• stretch : 수직 방향에 최대한 늘려서 (기본값)
• flex-start : 수직 방향에 위쪽
• flex-end : 수직 방향에 아래쪽
• center : 수직 방향 가운데
• baseline : 컨테이너의 기준선에 배치
  

📌row-gap, column-gap, gap

• row-gap: 요소 간 행 간격
• column-gap: 요소 간 열 간격
• gap: 요소 간 행과 열 간격

📌flex item한테 적용시킬 수 있는 속성

• align-self
  기본적으로 flex item들의 교차축 정렬은 flex container에 설정되어있는 align-items를 따라간다 하지만 특정 item 하나만 교차축 정렬을 다르게 하고 싶다면 flex-self를 사용할 수 있다
  

  <div style="height: 200px; align-items: flex-start;" class="container">
        <div class="item">df</div>
        <div class="item">wegqweg</div>
        <div class="item">aaa</div>
        <div style="align-self: center;" class="item">qqqq</div>
    </div>

• flex-grow
  flex container가 item들 보다 더 클때(row:너비, column:높이) item들을 얼마나 늘려서 flex container를 가득 채울지 설정하는 속성값 0 을 주면 늘리지 않겠다, 그 외의 양수를 주면 그 양수의 비율 만큼 늘리겠다
  

• flex-shrink
  flex container가 flex item 보다 더 작을 때 flex item들을 얼만큼 줄일 것인가를 설정하는 속성 0을 주면 줄이지 않겠다 양수값을 주면 비율만큼 줄이겠다
  
  📌 글자가 들어가 있는 경우 flex-shrink 적용방법

  • overflow: hidden;
    -word-wrap: break-word;
    -text-overflow: ellipsis; (overflow 된 아이들은 ...으로 표시됨. e,g, 미리보기등)

📌overflow

overflow-x, overflow-y를 한번에 설정하는 단축속성
visible 
    기본값, 넘치는 요소가 있을 때 모두 보여줘
hidden
    넘치는 요소가 있을 때 가려줘
scroll
    넘치는 요소가 있을 때 스크롤 할수 있게 해줘

📌text-overflow

ellipsis
    텍스트가 넘치는 요소가 있다면 ... 으로 말줄임표 표현   

📌word-wrap

word-break
    단어 단위(띄어쓰기)로 넘치는 요소가 있다면
    아래로 내려서 보여줌 

• flex-basis
  flex-direction이 row / row-reverse --> flexbasis는 flex item의 가로길이 설정 flex-direction이 column / column-revers --> flexbasis는 flex item의 세로길이 설정
  

• flex
  flex-grow, flex-shrink, flex-basis를 한번에 설정할 수 있는 단축속성

flex : 1 0 200px;
flex-grow:1; flex-shrink:0; flex-basis:200px;