프로그래밍 공부 일기

2020년 8월 4일 Progate Lv.226
Flexbox에서 width가 작동하지 않았기 때문에 원인을 조사해 해결했다. (메모)flex-shrink 를 0으로 하는 것으로 width 의 지정을 할 수도 있는 것 같지만, 이번은 width 를 사용하는 것을 그만두고 flex-basic 를 사용했다.

직면한 문제

Flexbox로 지정하면 화면 폭에 따라 자식 요소가 늘어나 깨끗하게 보이지 않게 되어 버렸다.

아래의 이미지와 같이 자식 요소의 너비를 지정하여 화면 너비로 자식 요소가 늘어나지 않도록하고 싶습니다.

해결 방법

flex-basis 를 사용한다. 자식 요소에 대해 width 와 같이 %나 px로 폭의 값을 지정할 수 있다. 초기값은 auto 로 되어 있어, auto 로 지정했을 경우는 자식 요소의 컨텐츠의 사이즈가 적응된다.

html

<div class="parent">
  <div class="children">
    <!--省略-->
  </div>
</div>

css

.parent{
  display:flex;
}

.children{
  flex-basis: 500px;
}