flex를 사용해 두줄짜리 카드리스트를 만들어보자

UL그룹을 감싸고있는 wrap의 가로크기가 변해도 대응할 수 있는 리스트 그룹을 만들어 보기로 했다.

모바일 환경에서 CSS의 flex속성을 사용해 간단하게 만들 수 있다.

<div class="mobile_wrap">
  <ul class="card_group">
    <li>
      <a href="" target="">
        <div class="image_area">
          <img src="" alt="">
        </div>
        <div class="txt_area">
          여기에는 텍스트
        </div>
      </a>
    </li>
    <li>
      <a href="" target="">
        <div class="image_area">
          <img src="" alt="">
        </div>
        <div class="txt_area">
          여기에는 텍스트
        </div>        
      </a>
    </li>
    <li>
      <a href="" target="">
        <div class="image_area">
          <img src="" alt="">
        </div>
        <div class="txt_area">
          여기에는 텍스트
        </div>
      </a>
    </li>
    <li>
      <a href="" target="">
        <div class="image_area">
          <img src="" alt="">
        </div>
        <div class="txt_area">
          여기에는 텍스트
        </div>
      </a>
    </li>
  </ul>
</div>

 

See the Pen flex-item 1Line in 2block by Yongkyu, Lee (@Yongkyu) on CodePen.

Flex wrap을 설정할때 justify-content:space-between 속성을 주면 flex-item간의 간격을 자동으로 조정해준다.

 

flex-item 속성중 중요하게 살펴볼 속성은 다음과 같다.

.card_group li: flex:0 0 calc(50% - 20px);/* 한 줄에 두 개의 li를 배치하기 위한 설정 */

참고사이트 : https://naradesign.github.io/flex-direction-order.html