(4)CSS_레이아웃_2_FlexBox-3-flex-wrap 속성, 4-display : flex + gap 속성

3-flex-wrap

＃Default 상황 :

• display : flex
• Div Container > Div 8개의 요소 =>핵심은 : 부모 Box의 크기를 넘어간 요소들이 배치된 상황

＃알아야 할 개념 :

● 개념_ flex-wrap 속성 

○ 정의 : 요소 Box들이 부모 Box의 크기를 넘어서는 상황일 때, flex - wrap : wrap을 부모 Box의 CSS에 적용하면,

=> Main-axis 축이 하나 더 추가하여 배치한다.

=> 주의 : 기존 Main-axis의 요소들은 꽉 채워지게 되진 않는다.

①.  Flex-direction : row (왼쪽 -> 오른쪽)에서 flex-wrap : wrap 상황 :

②.  Flex-direction : column 에서 flex-wrap : wrap 상황 :

4 - display : flex + gap 속성 

＃Default 상황 :

• display : flex
• Div Container > Div 3개의 요소

※참고_ 왜 Green Box의 크기가 더 클까?

=> 코드에서는 요소 Box들의 width, height가 설정되어있지 않은데,

§ width : Green이 크다 => 안에 컨텐츠("Green"이라는 Text)에 따라 결정됨

§  height : 꽉 채워져 있음 => block 성질

＃알아야 할 개념 :

● 개념1_ margin과 gap의 차이 :

○ margin :

• margin을 맞추기 위해서는 요소들의 크기가 바뀌는 데에 영향을 준다.
• 쓰임새 : 해당 배치가 부모 배경의 차이가 두도록 배치 (즉, 요소들끼리 배치 관계에서는 사용 X)

ex_  텍스트를 선 위에 두도록 한다,

○ gap :

• gap을 맞추기 위해서는 요소들의 크기가 바뀌는 데에 영향을 주지않는다. (즉 요쇼의 크기는 바뀌지 않는다.)
• grid와 함께 쓰인다고 함(뒤에서 배울 듯)
• 쓰임새 : 해당 배치가 부모 배경의 차이가 두도록 배치 (즉, 요소들끼리 배치 관계에서 사용)

● 개념2_ gap 사용법 : flex - wrap과 함께 or 그냥 :

사용법 2가지 :

○ 방법1 : gap : px ; //세로 가로 같이

○ 방법 : gap : 세로px 가로px ; //Flex - direction이 달라도, 세로 가로 변화 X!!

○ gap  사용 전 : display : flex + flex - direction : column + flex-wrap : wrap 의 상황

//각 요소의 width ; 200px height : 100px로 고정 설정

 

○ gap  사용 후 : 요소들 끼리만 , gap이 생김 (부모 Box의 Container와의 차이는 없다)

 

○ gap  대신 margin 사용 :

※연습문제1  :

● 문제 조건 :

앞에서 만든 플레이리스트에는 한 가지 아쉬운 점이 있는데요.

마진을 사용해서 간격을 정했기 때문에 플레이리스트 전체 영역의 가장자리에 불필요한 여백(빨간색 부분)이 생겼습니다.

이번 실습에선 플렉스박스 안에서 요소들 사이에서만 간격을 정해 봅시다.

마진 대신에 플렉스박스에서의 간격을 24px로 하고 불필요한 가장자리 여백을 없애 보세요.

 

● 해결방법 :

=> 전체 Box인 playlists Div에 양옆 여백주지 않도록, 즉 음악Box 사이들(요소들)끼리만, 24px 여백을 주도록 하는 것이다.

=> 음악 Box들에 적용된 margin : 12px를 없앤 뒤, 부모 Box인   playlists Div에 gap : 24px를 준다.

 

※실전에서 사용 사례 :