기로그 기로그

컨테이너 속성에 이어 아이템 속성에 대해 공부한 내용들을 정리했다. 1️⃣flex-basis flex로 설정된 컨테이너 안의 초기 아이템 크기를 설정하는데 사용된다. 길이 값(px,%등)을 사용하여 설정할 수 있다. 기본값은 auto이며 이 값은 컨텐츠 크기에 따라 결정된다. flex-direction에 따라 대상이 변한다. row:너비 column:높이 ⚠️flex-basis와 width의 차이점 원래의 width가100px이 넘지 않는 아이템은 100px이 되었고, 100px이 넘는 아이템은 그대로 크기를 유지한다. 참고로 flex-basis를 사용할 때 ,박스의 컨텐츠가 한글이거나 띄어쓰기가 있다면 자동으로 줄바꿈 된다. (flxe의 동작이 아닌 css의 동작이 그렇다고 한다.) 즉, basis는 ..

화면을 구성할 때 flex 속성을 사용하면 유연하게 아이템을 배치할 수 있다. flex는 기본적으로 컨테이너 속성과 아이템 속성 두 가지로 나눠볼 수 있다. 컨테이너 속성 1️⃣display : flex; display의 값을 flex 로 선언해주면 플렉스 박스로 만들어 줄 수 있다. 컨테이너 안의 아이템들은 화면 해상도에 맞는게 유연하게 동작하게 된다. inline-flex값도 존재하지만 거의 사용되지 않는다. 컨테이너의 아이템들이 반응형으로 동작하지 않기 때문이다. 👉🏻flex : 컨테이너가 블록 속성을 갖는다. 👉🏻inline-flex : inline-block과 같은 속성을 갖는다. flex속성을 지정하면 아이템들은 가로 방향으로 배치되고, 따로 길이를 지정하지 않으면 content만큼만 차지하..