# flex wrap

17개의 포스트
post-thumbnail

[TIL] CSS flex-wrap 적용 안됨

문제점사진과 같이 팀소개 프로젝트 중 방명록 섹션에서 문제가 생겼다.제일 좌측에는 처음 "comment"를 작성 하는 곳이고 작성된 "comment"는 오른쪽에 이어서 붙는다.display : grid;로 구성하고 글작성 부분을 제외한 작성된 "comment"는$('

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

Flex 레이아웃 두번째

flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정한다.만일 줄바꿈을 허용하지 않을 경우, item이 아무리 많아져도 무조건 한줄에 들어가도록 합니다.flex-wrap : nowrap (기본값)item의 줄바꿈을 허용하지 않는다.따라서

2023년 2월 21일
·
0개의 댓글
·

[CSS] flex 레이아웃 2-11

웹 사이트의 구조를 영리하게 짤 수 있다.display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 된다.inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있다.flex-direction의 값row(가로로 왼쪽부터)column(세로

2023년 1월 25일
·
0개의 댓글
·

[프론트엔드] Flex속성

Flex 속성 flex-direction : row | row-reverse | column | column-reverse > row(default) >row-reverse >column >![](https://velog.velcdn.com/images/dia

2022년 10월 24일
·
0개의 댓글
·

Flexbox

flexbox = Flexible Box Moduleflexbox 내의 아이템 간의 공간 배분과, 정렬 기능을 제공하는 레이아웃 모델레이아웃을 다룰 때 한 번에 하나의 차원(행 or 열)만을 다룬다. = 1차원 모델display: flex 부모 박스 요소에 적용해, 자

2022년 8월 29일
·
1개의 댓글
·

[CSS]flexbox,display,flex-direction,flex-flow,flex-warp

컨테이너안에 item들이 있어야 하는 즉, 부모와 자식간의 관계를 가지고 있어야 성립2차원의 평면이 아닌 1차원의 요소들을 정렬하기 위해 나온 개념felx containeritem의 부모felx item부모의 자식간의 관계에서 자식의 해당 main axis행의 축, 주

2022년 8월 24일
·
0개의 댓글
·
post-thumbnail

Flexbox Froggy 24

두세 번만 더 써보면 완벽하게 체득될 듯ㄷㄷㄷ

2022년 8월 9일
·
0개의 댓글
·
post-thumbnail

[CSS] flex-wrap

[CSS] flex-wrap flex-wrap은 flex의 아이템들을 표시할 때 줄 바꿈을 지정해준다. wrap 아이템이 flex안에서 표시되도록 줄 바꿈을 한다. 6개의 아이템이 공간에 맞게 줄 바꿈 되어 들어간다. nowrap 아이템이 줄바꿈 되어 들어가지

2022년 7월 9일
·
0개의 댓글
·
post-thumbnail

플렉스 박스 레이아웃

flex-wrap 속성은 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다. 속성 값으로는 wrap 이나 wrap-reverse로 지정한 후 웹 브라우저 화면의 너비를 늘리거나 줄여 보면 플렉스 컨테이너 너비에 따라 여러 줄로 표시되는

2022년 5월 5일
·
0개의 댓글
·
post-thumbnail

[KDT]FCFE - 3주2일 - 2. 웹페이지 만들기 4 ( flex )

하나의 div에 3개의 버튼 만들어 넣기width를 가진 버튼그룹 div를 만들고버튼그룹인 div에 display:flex; 를 주고flex-wrap: wrap;: 줄이 넘어가면 줄 바꿈하여 배치함.을 설정한다.버튼을 크기를 조정하여 2개는 윗줄에 한개는 아랫줄에 오게

2021년 12월 7일
·
0개의 댓글
·
post-thumbnail

flex 요소 정리

flex 컨테이너 요소들에 대해 간략하게 정리

2021년 11월 30일
·
0개의 댓글
·
post-thumbnail

수업정리_modal,card

1. Br 태그에 관해서 2.폰트 3. Modal: 팝업과의 차이점 4.Card

2021년 11월 15일
·
0개의 댓글
·
post-thumbnail

[CSS] Flexbox

flex-direction, flex-wrap,justify-content align-items 같은 flex-box요소들과, flex-grow, flex-basis, align-self 같은 flex-item요소들에 대해 다룬다.

2021년 10월 1일
·
0개의 댓글
·
post-thumbnail

"Project: Market Bully" 를 진행중에 메모.. (끄적끄적)

모든 과정들이 나에게는 배움이었지만, 여기에다가 끄적이지 않으면 다시 같은 실수를 남길 거 같아 이 글을 끄적끄적 적어본다. ※ 이 글은 필자가 평소에 몰랐던 것들이나 자주 하는 실수하는 것들을 남기는 것이기에, 내용끼리 상관관계가 없음필자는 마켓컬리에서 다음 페이지를

2020년 12월 20일
·
0개의 댓글
·