본문 바로가기

html & css/개념55

flex - 기타 속성들 flex-wrap 랩을하면 컨테이너의 크기보다 아이템들의 크기가 크다면 아이템들의 크기의 합이 크다면, 그 아이템은 줄바꿈이 돼서 아래 줄로 내려간다는 의미 기본값은 no-wrap이다. aling-items 수직과 관련된 정렬의 결정을 한다. 기본값은 stretch가 기본값 컨테이너의 아이템들이 있고, 컨테이너가 플렉스 되는 순간에 아이템들은 컨테이너의 높이 값과 같아진다. (스트레치 상태) 자신의 컨텐트 크기만에 될려면 flex-start ,flex-end, center baseline -콘텐트들에 가상의 줄을 맞추는 것 justify-content 수평과 관련됨 flex-start ,flex-end, center - 왼쪽, 오른쪽, 가운데 alingn-content alingn-items는 컨테이너 .. 2023. 11. 24.
flex - holy grail layout holy grail (성배) Layout 아래와 같은 레이아웃을 holy grail 레이아웃이라고 한다. - 성배를 찾는 것과 같은 노력을 해서 지어진 이름 DOCTYPE html> .container { display: flex; flex-direction: column; } header { border-bottom: 1px solid gray; padding-left: 20px; } footer { border-top: 1px solid gray; padding: 20px; text-align: center; } .content { display: flex; flex-direction: row; } .content nav { border-right: 1px solid gray; } .content a.. 2023. 11. 24.
flex - grow & shrink 아이템(자식)에게 주는 속성들 1. felx-basis - flex의 기본 방향에 해당되는 엘리먼트의 크기를 지정하는 것 .item:nth-child(2) { flex-basis: 300px; /* basis - 기본 */ /* flex의 방향에 해당되는 엘리먼트의 크기를 지정하는 것 */ /* flex-grow: 2; */ } 2. flex-grow - 각각의 엘리먼트들이 여백을 채울수 있을까? - 각각의 엘리먼트들에게 커지게하는 값을 주면 여백의 공간이 각각의 엘리먼트에 1/n씩 나누어 가지는 것 - 공평하게 여백 전체를 item요소들이 나누어 가지는 것 - 1/5 씩 나눠가지계됨 여기서 2번만 2만큼 더 가지게 하고 싶다면? -> flex-grow: 2; 적용 - 1, 3, 4, 5는 1/6을 가지.. 2023. 11. 24.
flex의 기본 flex 기본 - 바깥족에 있는 컨테이너에 display 값을 flex로 줘야하고, flex-direction을 따로 지정하지 않으면 row와 같다. - colum으로 바꾸면 수직 방향으로 각각의 태그들이 정렬된다. - 기본적으로 flex 각각의 태그는 그 방향의 화면 전체를 차지한다. DOCTYPE html> .container { background-color: powderblue; height: 200px; display: flex; flex-direction: column-reverse; /* row가 기본값, 행의 방향으로 정렬 */ } .item { background-color: tomato; color: white; border: 1px solid white; } 1 2 3 4 5 2023. 11. 24.

티스토리툴바