[문제점 해결해보기] flex-basis

사진 아래쪽에 보면.... notice에 공지사항 글자가 줄바꿈이 된다.... 

 

아래는 HTML과 CSS코드

<div class="inner">
    <div class="inner__left">
      <h2>공지사항</h2>
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="javascript:void(0)">크리스마스 & 연말연시 매장 영업시간 변경 안내</a>
          </div>
          <div class="swiper-slide">
            <a href="javascript:void(0)">[당첨자 발표] 커피 영수증 이벤트</a>
          </div>
          <div class="swiper-slide">
            <a href="javascript:void(0)">애플리케이션 버전 업데이트 안내</a>
          </div>
          <div class="swiper-slide">
            <a href="javascript:void(0)">[당첨자 발표] 전자영수증 이벤트</a>
          </div>
        </div>
      </div>
      <a href="javascript:void(0)" class="notice-more">
        <span class="material-icons">add_circle</span>
      </a>
    </div>
    <div class="inner__right"></div>
  </div>

 

.notice .inner {
  height: 62px;
  display: flex;
}
.notice .inner__left {
  width: 70%;
  background-color: #333;
  display: flex;
  align-items: center;
}
.notice .inner__right {
  width: 30%;
}
.notice .inner__left h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-basis: 100px;
}
.notice .swiper {
  height: 62px;
  flex-grow: 1;
}
.notice .notice-more {
  width: 62px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.notice .inner__left .notice-more .material-icons {
  color: #fff;
  font-size: 30px;
}
.notice .inner__left .swiper .swiper-slide {
  height: 62px;
  display: flex;
  align-items: center;
}

 

 

그래서 폭풍검색질... 

결국 flex-basis를 찾아냈다.

flex-basis 값을 100px로 하니 글자 넓이에 맞춰 조절되었다. 

 

 

 

남아있는 숙제는 flex-basis값을 굳이 가변하는 글자 길에 맞춰 바꾸지 않아도 자동으로 바꿔주는 기능을 찾아봐야 겠다

 

참고사이트 : 

https://velog.io/@hotdari90/CSS3-Flex-Layout-%EC%9E%90%EC%8B%9D%EC%9A%94%EC%86%8C