[CSS] flex-basis vs width 차이점

flex-basis가 항상 width에 적용되는 것은 아니다.
flex-direction: row인 경우, flex-basis 는 너비를 제어한다.
그러나 flex-direction: column인 경우, flex-basis는 높이를 제어한다.

• 주요차이점
  • flex-basis는 flex item만 적용된다. flex container 는 flex-basis 를 무시하지만 width나 height는 사용할 수 있다.
  • flex-basis는 주축에서 작동한다. 예를 들어 flex-direction: column은 플렉스 항목의 크기를 가로로 조정하려면 width 속성이 필요하다.
  • 절대위치에 있는 flex 항목에는 영향을 주지 않는다.

#container {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: auto;
    background-color: #fff;
}
.item {
    flex-basis: 50px;
    font-size: 40px;
}

#container {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: auto;
    background-color: #fff;
}
.item {
    width: 50px;
    font-size: 40px;
}

 

 

---

 

Reference

https://pythonq.com/so/css/13488