flexbox

🔶flex

• 부모요소에서 flex 적용해야 자식요소에서 적용됨. 자식 요소에서는 명시하지 않음.
• inline-block의 단점을 보완하기 위한 것.
• 블록요소인데, 가로정렬 됨.
• flex 예시
  

/*css*/
   #parent {
        display: flex;
        justify-content: space-around; }
        
    span {
       width: 200px;
       height: 200px;
       background-color: blanchedalmond;
       border: 1px solid black; }
      
/* html */
 <div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
 </div>

🔶 flex-wrap

• nowrap(기본값) : 나열된 요소의 넓이가 부모 넒이에 맞게 자동 축소됨.
  (브라우저 창을 축소하면 너비가 자동으로 바뀜)

/*css*/
   #parent {
        display: flex;
        justify-content: space-around; 
        flex-wrap: nowrap;
        }
        
    span {
       width: 200px;
       height: 200px;
       background-color: blanchedalmond;
       border: 1px solid black; }
      
/* html */
 <div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
 </div>

• wrap : 요소들의 총 넓이가 부모보다 클 때, 이 요소들을 다음 줄에 이어서 정렬해 줌
  (브라우저 창을 축소해도 너비가 그대로 유지됨).

    flex-wrap: wrap;