소록소록 Day 3_flex가 안먹어! > 해결

오류발견

해쉬태그 묶음에 flex 가 안먹는 오류가 발생했다..

첫번째 시도 > 해결!

코드를 살펴봤다.
html 에서는 해쉬태그를 따로 묶은 hash_container,
새로운 태그를 입력하는 입력창을
hash_mkr 로 전체 묶어주고,

[html코드]

<!-- 해쉬태그 / 입력창 -->
<div class="hash_mkr">
  <div class="hash_container">
    <div class="hash">#태그입력</div>
    <div class="hash">#최대3개</div>
    <div class="hash">#4글자</div>
  </div>
  <div>
    <input class="hash_input" type="text" placeholder="태그를 입력하세요">
  </div>
</div>

css에서는 inline-flex를 사용해 해쉬태그를 묶어준 상태였다.

[css코드]

.hash_mkr {
  display: flex;
  gap: 5px;
}

.hash_container {
  display: inlineflex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 18px;
  gap: 5px;
}

.hash {
  font-size: 14px;
  background-color: #F1EEEA;
  border-radius: 14px;
  color: #999999;
  border: none;
  cursor: text;
  padding: 4px 8px 4px 8px;
  white-space: nowrap;
}

.hash_input {
  border: none;
  outline: none;
  font-weight: 400;
  color: black;
  font-size: 14px;
}

알고보니 아래와 같은 오타였다.
inline과 flex 사이에 - 가 빠졌음

.hash_container {
  display: inlineflex;    <<---- 오타지점**
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 18px;
  gap: 5px;
}

오타를 아래처럼 고쳤더니,

.hash_container {
  display: inline-flex;    <<---- 수정**
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 18px;
  gap: 5px;
}

짠!! 고쳐졌다.