$$config title: CSS flex와 자주 사용되는 속성 (페이지 레이아웃시 사용) keywords: - IT - CSS $$ # flex ## flex를 부모 요소에게 쓰면 자식한테 적용이 됨 - `flex-grow` : 객체 사이를 멀리 떨어뜨림 - 해당 태그들 사이에 div 등으로 하나 만들어놓고 class="flex-grow"로 줌 - `container` : max-width라고 해서 계속 양쪽으로 퍼지게 하는 것이 아니라 넓이의 한계를 생기게 해줌 (container를 먼저 쓴다음에 mx-auto를 해줘야 가운데로 정렬된다) - `mx-auto` : margin의 left와 right를 auto로 준다. 즉, 좌우의 외부에 여백이 생기도록 한다.(=객체를 가운데로 정렬해준다.) - `h-20` : height(높이)를 20만큼 준다. - `items-center` : 부모 요소에다가 flex를 하고 items-center를 주면 자식을 수직 중앙정렬을 시켜준다. - `px-3` : padding의 left와 right의 내부 여백을 3만큼 준다. - `h-full` : 여기서 h는 높이고 full은 최대라는 뜻으로 부모의 높이를 끌어올 때 사용 - 부모에게 flex가 없는 경우 자식이 자연스럽게 부모 것을 못 물려받기 때문에 부모가 가진 속성을 끌어올 때 `~~-full`로 사용 - `hover:underline` : 마우스를 올렸을 경우, 밑줄이 생기게 하는 것 ![image](https://i.postimg.cc/W3bH84Zp/flex-main.png) > head.jspf ```html

로고

${pageTitle} 페이지

``` > main.jsp ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis dolorum impedit id error rem laboriosam quod totam accusamus. Alias necessitatibus nisi fugit natus aspernatur reiciendis soluta. Sapiente cumque dignissimos dolor.

``` ![image](https://i.postimg.cc/wj84P2NG/flex-list.png) > list.jsp ```html

번호	작성날짜	수정날짜	작성자	제목
${article.id}	${article.regDate.substring(2, 16)}	${article.updateDate.substring(2, 16)}	${article.memberId}	${article.title}

``` > commin.css ```css /* 라이브러리 */ .table-box-type-1 > table { width: 100%; } .table-box-type-1 > table th, .table-box-type-1 > table td { border: 1px solid black; padding: 10px; } ```