728x90
https://d2.naver.com/helloworld/854017
flex-grow
- 아이템의 확대에 관련된 속성
- 0 또는 자연수
- 기본값 0
- 0 : 컨텐츠크기로 고정 (늘어나지 않음)
- 1 이상 : 컨테이너를 완전히 채우도록 늘어남
<div class="container">
<div class="item">아이템</div>
</div>.container {
display: flex; height: 100px;
border: 3px solid #333;
}
.item{
flex-grow: 0;
margin: 5px;
background-color:skyblue;
}
.container {
display: flex; height: 100px;
border: 3px solid #333;
}
.item{
flex-grow: 1;
margin: 5px;
background-color:skyblue;
}
아래와 같이 아이템에 마우스를 올리면 바가 늘어나는 효과를 만들수 있다.
.container {
display: flex; height: 100px;
border: 3px solid #333;
}
.item{
flex-grow: 0;
margin: 5px;
background-color:skyblue;
transition: .5s;
}
.item:hover{
flex-grow: 1;
}
flex-shrink
- 아이템의 축소에 관련된 속성
- 0 또는 자연수
- 기본값 1
- 0 : 컨텐츠크기로 고정 (줄어들지 않음)
- 1 이상 : 컨테이너 크기에 맞게 줄어듦
<div class="container">
<div class="item">아이템</div>
</div>.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 50%;
}
.item{
flex-shrink: 0;
margin: 5px;
background-color:orange;
width: 1300px;
}
.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 50%;
}
.item{
flex-shrink: 1;
margin: 5px;
background-color:orange;
width: 1300px;
}
flex-basis
- 아이템의 기본크기 지정
- width 에서 사용하는 모든 단위 가능(px, %, em, rem, vw, vh)
- 기본값 auto
- 0 : 컨테이너를 기준으로 아이템 크기가 결정됨
- auto: 아이템의 크기를 고려하여 크기가 결정됨
- 고정값 : 아이템 크기가 고정됨
<div class="container">
<div class="item">중간 아이템</div>
<div class="item">정말정말 긴 아이템</div>
<div class="item">짧음</div>
</div>.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 50%;
}
.item{
margin: 5px;
background-color:skyblue;
flex-basis: auto;
text-align: center; line-height: 100px;
}
.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 50%;
}
.item{
margin: 5px;
background-color:skyblue;
flex-basis: 150px;
text-align: center; line-height: 100px;
}
.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 50%;
}
.item{
margin: 5px;
background-color:skyblue;
flex-basis: 0px;
text-align: center; line-height: 100px;
}
flex:1 을 적용한 경우 flex-basis: 0 은 컨테이너 크기에 맞춰 균등분배한다.
.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 50%;
}
.item{
margin: 5px;
background-color:skyblue;
flex: 1; flex-basis: 0;
text-align: center; line-height: 100px;
}
flex:1 을 적용한 경우 flex-basis: auto 은 아이템에 들어간 컨텐츠 길이에 따라 차등분배된다. 컨텐츠가 길면 공간을 더 많이 가져가고 컨텐츠가 짧으면 공간을 더 적게 가져간다.
.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 50%;
}
.item{
margin: 5px;
background-color:skyblue;
flex: 1; flex-basis: auto;
text-align: center; line-height: 100px;
}
flex
- flex-grow flex-shrink flex-basis 를 한번에 설정
- 한개의 숫자만 설정하면 flex-grow 만 설정됨 (flex-shrink: 1 / flex-basis: 0)
- flex: 1 (1 1 0) flex:2 (2 1 0) flex:3 (3 1 0)
- flex:1 은 flex-grow:1 flex-shrink: 1이므로 컨테이너 크기에 따라 아이템이 늘어나거나 줄어듦
- 모든 아이템에 flex:1 을 설정하면 크기가 균등분배됨
<div class="container">
<div class="item">중간 아이템</div>
<div class="item">정말정말 긴 아이템</div>
<div class="item">짧음</div>
</div>.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 50%;
}
.item{
margin: 5px;
background-color:skyblue;
flex: 1;
text-align: center; line-height: 100px;
}
flex:1 은 flex-grow:1 이므로 컨테이너가 커지면 아이템의 너비는 늘어난다.
.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 100%;
}
.item{
margin: 5px;
background-color:skyblue;
flex: 1;
text-align: center; line-height: 100px;
}
flex:1 은 flex-shrink:1 이므로 컨테이너가 줄어듦면 아이템의 너비는 함께 줄어든다.
.container {
display: flex; height: 100px;
border: 3px solid #333;
width: 20%;
}
.item{
margin: 5px;
background-color:skyblue;
flex: 1;
text-align: center; line-height: 100px;
}
flex: initial - 줄어들기만 함
컨테이너 크기가 줄어들면 아이템의 크기도 함께 줄어들지만, 컨테이너 크기가 커져도 늘어나지는 않는다. 디바이스 크기가 작아질때 반응형을 적용하려면 기본값을 사용하면 된다. flex: 0 1 auto 와 같은 의미다.
<div class="container">
<div class="item">아이템</div>
</div>.container{
display: flex;
height: 100px;
border: 3px solid #333;
}
.container .item{
width: 500px;
margin: 5px;
background-color: #333;
}브라우저 창을 줄여가면서 실험해보자!
max-width 와 유사하게 동작한다.
flex:none - 크기 고정
아이템의 크기가 컨테이너 크기에 따라 늘어나거나 줄어들지 않고 고정된 크기를 가진다. 크기가 고정되어야 하는 아이템은 flex:none 으로 설정하면 된다. flex: 0 0 auto와 같은 의미다.
<div class="container">
<div class="item">아이템</div>
</div>.container{
display: flex;
height: 100px;
border: 3px solid #333;
}
.container .item{
width: 500px;
margin: 5px;
background-color: #333;
flex: none;
}컨테이너의 크기가 줄어들어도 아이템의 크기는 고정된다. 브라우저 창을 줄이거나 늘리면서 실험해보자!
flex: auto / flex: 1 - 늘어나거나 줄어듦
컨테이너 크기에 맞춰 아이템이 늘어나거나 줄어든다. 디바이스가 커지거나 작아질때 반응형웹을 적용하려면 flex:auto 로 설정하면 된다. flex: 1 1 auto 와 같은 의미다.
<div class="container">
<div class="item">아이템</div>
</div>.container{
display: flex;
height: 100px;
border: 3px solid #333;
}
.container .item{
width: 500px;
margin: 5px;
background-color: #333;
flex: auto;
}컨테이너의 크기에 맞춰 아이템이 늘어나거나 줄어든다. 브라우저 창을 줄이거나 늘리면서 실험해보자!
flexbox 와 margin: auto 함께 사용하기 - 특정 아이템의 위치만 독립적으로 이동시킴
컨테이너에 display:flex 를 설정하고 아이템 margin 에 auto 를 적용하면 아이템의 위치를 독립적으로 제어할 수 있다.
<div class="container">
<div class="item">아이템</div>
</div>아이템을 세로방향으로 가운데 위치시키려면 아래와 같이 margin: auto 0 를 설정하면 된다.
.container{
display: flex;
height: 500px;
border: 3px solid #333;
}
.container .item{
margin: 5px; height: 50px;
background-color: #333;
margin: auto 0;
}
컨테이너의 display: flex 설정을 비활성화하면 동작하지 않는다.
.container{
/* display: flex; */
height: 500px;
border: 3px solid #333;
}
.container .item{
margin: 5px; height: 50px;
background-color: #333;
margin: auto 0;
}
아이템을 가로방향으로 가운데 위치시키려면 아래와 같이 margin: 0 auto 를 설정하면 된다.
.container{
display: flex;
height: 500px;
border: 3px solid #333;
}
.container .item{
margin: 5px; height: 50px;
background-color: #333;
margin: 0 auto;
}
아이템을 컨테이너의 정중앙에 위치시키려면 margin: auto auto 를 설정하면 된다. 물론 컨테이너에 display: flex 가 적용된 경우에 한해서다.
.container{
display: flex;
height: 500px;
border: 3px solid #333;
}
.container .item{
margin: 5px; height: 50px;
background-color: #333;
margin: auto auto;
}
.container{
display: flex;
height: 500px;
border: 3px solid #333;
}
.container .item{
margin: 5px; height: 50px;
background-color: #333;
margin-top: auto;
}컨테이너에 display:flex 를 적용하고 아이템에 margin-top: auto 를 지정하면 컨테이너 하단에 딱 붙어있다. 개발자 도구에서 컨테이너 높이를 변경하면서 실험해보자!
1. 스크롤이 없는 100% 레이아웃
<div class="container">
<header>헤더</header>
<div class="tab">탭</div>
<main>
<aside>사이드바</aside>
<section>메인컨텐츠</section>
</main>
</div>*{
box-sizing: border-box;
}
html, body{
margin: 0; padding: 0;
}
.container {
display: flex; flex-direction: column;
width: 100%; height: 100vh;
border: 3px solid #333;
}우선 컨테이너를 브라우저 창 사이즈에 맞게 설정하고, flex-direction 을 column 으로 지정하여 헤더, 탭, 메인 영역이 나란히 세로로 나열되도록 한다.
.container header, .container .tab{
border: 3px solid #333;
height: 70px; margin: .1rem;
}
.container main{
border: 3px solid #333;
}헤더와 탭의 높이를 동일하게 고정값으로 설정한다.
flex:1 을 설정하면 메인 영역은 브라우저 높이(컨테이너)에 따라 높이가 늘어나거나 줄어든다. 브라우저 높이를 줄이거나 늘려보자!
.container main{
border: 3px solid #333;
flex: 1;
}
.container main{
border: 3px solid #333;
flex: 1;
display: flex;
}
.container main aside, .container main section{
border: 3px solid #333;
}메인 영역 안에 위치한 사이드바와 메인 컨텐츠를 가로로 나열하기 위하여 main 에 display: flex 를 설정한다.
사이드바는 너비가 변하지 않도록 고정값(px)으로 설정한다. 메인컨텐츠에 flex:1 을 지정하면 브라우저 전체 너비에서 400px 을 제외한 나머지 공간을 채운다. 브라우저 너비가 변하면 메인컨텐츠 너비가 유동적으로 변한다. 브라우저에서 한번 실험해보자!
.container main aside{
width: 400px;
flex: none;
}
.container main section{
flex: 1;
overflow: auto;
}flex: none 은 flex-grow: 0 flex-shrink: 0 flex-basis: auto 의 의미다. 즉, 사이드바가 컨테이너의 크기에 따라 늘어나거나 줄어들지 않고 고정된 크기를 가진다. 또한, 메인컨텐츠는 너비가 줄어들면 스크롤이 되도록 한다.
2. 네비게이션
<header>
<div class="logo">logo</div>
<div class="search">
<input type="text" placeholder="검색어를 입력하세요.">
<button>검색</button>
</div>
<div class="gnb">로그인</div>
</header>우선 헤더 안에 있는 로고, 검색창, 로그인 버튼을 가로방향으로 나열하기 위하여 header 에 display: flex 를 적용한다.
html, body{
margin: 0; padding: 0;
box-sizing: border-box;
}
header{
display: flex;
height: 70px;
border: 3px solid #333;
}로고, 검색창, 로그인 버튼에 flex:none 을 적용하여 크기를 고정한다.
.logo, .search, .gnb{
flex: none;
background-color: #eee;
}로그인 버튼에 margin-left: auto 를 적용하여 해당 버튼만 우측에 위치시킨다. margin-left: auto 는 자신의 좌측에 위치한 모든 요소를 다 밀어내면서 자신은 우측에 위치한다. 다른 아이템들과 별개로 위치를 독립적으로 잡아야 할때 사용하면 된다. margin-left: auto 를 적용하면 컨테이너인 header에 justify-content: space-between 을 줘도 적용되지 않는다.
.gnb {
margin-left: auto;
}로고와 로그인 버튼에 고정너비를 지정해주고 디자인한다.
.logo, .gnb{
width: 100px; height: 100%;
background-color: #333; color: #fff;
}
검색창 영역과 버튼에 고정너비를 지정해준다.
.search{
width: 500px;
}
.search button{
width: 100px;
}검색 버튼을 디자인한다.
.search button{
width: 100px;
background-color: #333; color: #fff;
border: none;
}검색영역에 display: flex 를 적용하고 사용자 입력창에 flex:1 을 지정해서 검색영역에서 검색버튼의 크기를 제외한 나머지 공간을 모두 차지할 수 있도록 한다. 즉, 입력창의 너비는 400px 이 된다.
.search{
width: 500px;
display: flex;
}
.search button{
width: 100px;
background-color: #333; color: #fff;
border: none;
}
.search input{
flex: 1;
}
3. 브라우저 하단에 붙어있는 푸터
<div class="container">
<footer>푸터</footer>
</div>컨테이너 높이를 브라우저 창 높이에 맞춘다. 컨테이너에 display: flex 를 주고, 푸터에 flex:1 을 적용하면 컨테이너 크기에 맞게 늘어나고 줄어든다. 푸터에 margin-top: auto 를 지정하면 푸터가 브라우저 하단에 고정된다. 브라우저 높이를 변경하면서 실험해보자! 물론 컨테이너에 align-items: flex-end를 줘도 동일하게 동작하지만 이렇게 되면 컨테이너 안에 푸터 이외의 다른 요소들도 함께 브라우저 하단에 고정된다. 즉, 푸터만 따로 배치하려고 할때 margin-top: auto 를 사용하면 된다.
*{
box-sizing: border-box;
}
html, body{
margin: 0; padding: 0;
}
.container{
display: flex;
height: 100vh;
border: 3px solid #333;
}
.container footer{
flex: 1;
height: 70px; margin: 5px;
background-color: #333;
margin-top: auto;
color: #fff;
font-size: 2rem; text-align: center;
}
4. 정렬이 다른 메뉴
<header>
<div class="logo">로고</div>
<div class="search">검색창</div>
<div class="signup">로그인</div>
</header>컨테이너 안에 위치한 아이템에 space-evenly 를 적용하면 중앙에서 균등한 여백을 두고 정렬된다.
*{
box-sizing: border-box;
}
header{
display: flex;
justify-content: space-evenly;
height: 70px;
border: 3px solid #333;
}
header *{
width: 100px; height: 100%;
background-color: #333; color: #fff;
}
5. 유동 너비 박스
https://codepen.io/witblog/pen/oPyvEa
7. 유동 너비 박스
...
codepen.io
컨테이너가 줄어들면서 아이템의 컨텐츠가 잘리면서 점(.)으로 표시되는 레이아웃을 만들어보자!
<div class="container">
<div class="text">나는 지난주에 뭐했는지 기억이 잘 나지 않는다.</div>
<div class="text">나는 지난</div>
<div class="text">나는 지난주에 뭐했는지</div>
<div class="text">나는 지난주에</div>
<button>버튼</button>
</div>컨테이너에 display: flex 를 적용하여 글자를 수평으로 나열한다.
*{
box-sizing: border-box;
}
.container{
display: flex;
height: 70px;
border: 3px solid #333;
}
flex: 0 1 auto 이므로 컨테이너가 줄어들면 아이템의 너비도 함께 줄어든다. 아이템의 너비가 줄어들면 내부에 있는 글자가 밖으로 삐져나오는데 overflow: hidden 을 주고, white-space: nowrap 으로 적용하면 아이템이 줄어들때 글자는 여러줄이 아니라 한줄에 가로로 길게 늘여뜨려진다. 여기에서 text-overflow: ellipsis 를 적용하면 아이템의 너비가 텍스트 길이보다 작아질때 점(.)으로 표시된다. 그리고 아이템의 너비는 300px 로 제한한다.
.container .text{
flex: 0 1 auto;
max-width: 300px;
margin: 5px;
border: 3px solid #333;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
6. 위아래로 흐르는 목록
핀터리스트나 쇼핑몰 사이트처럼 위아래로 나열되는 목록을 만들어보자!
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>10개의 아이템 목록을 만든다. 컨테이너에 flexbox 를 적용하고 아래로 나열되도록 flex-direction: column 을 지정한다. 컨테이너 높이를 브라우저 창 높이로 제한하고 flex-wrap: wrap 을 적용하면 위아래로 흐르는 목록을 구현할 수 있다. 마지막으로 수평방향과 수직방향에 대하여 균등한 여백을 주기 위하여 space-evenly 를 적용한다.
*{
box-sizing: border-box;
}
html,body{
margin: 0; padding: 0;
}
.container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
height: 100vh;
border: 3px solid #333;
}
.container .item{
width: 200px; height: 200px;
margin: 10px;
background-color: #333; color: #fff;
font-size: 5rem;
}
<div class="actions">
<img src="data:image/jpeg;base64,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" alt="profile-1">
<img src="data:image/jpeg;base64,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" alt="profile-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpwSuc5_00-b2FxK198sY73ArVySbThSLAXQ&usqp=CAU" alt="profile-3">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQEZrATmgHOi5ls0YCCQBTkocia_atSw0X-Q&usqp=CAU" alt="profile-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKDP-4Dg4s4b6YxTTriW24nV5Q0RL65zh7JA&usqp=CAU" alt="profile-5">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhGE2phgRinbSsr8VJrLNwB954CTc8UZ1JhQ&usqp=CAU" alt="profile-6">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkQUg_P0cc8EgSCk-SdT8Yvcm6E5SbdfuhzA&usqp=CAU" alt="profile-7">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbMigoSI-w6bjLxl3qXVC3482EAbhYImiZXw&usqp=CAU" alt="profile-8">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFacn0pb12vsSRTPKRUDnxFrP8sj7st13r8A&usqp=CAU" alt="profile-9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoZf-IXN17ph2s07rUcgVDwIpTxbOQh55noQ&usqp=CAU" alt="profile-10">
</div>*{
box-sizing: border-box;
}
html,body{
margin: 0; padding: 0;
}
.actions{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
height: 100vh;
border: 3px solid #333;
}
.actions img{
width: 200px; height: 200px;
margin: 10px;
background-color: #333; color: #fff;
font-size: 5rem;
}이를 활용하면 아래와 같이 프로필 사진들을 위아래로 나열할 수 있다. 물론 제품사진 목록을 나열할 수도 있고, 의류목록도 나열할 수 있다.
*{
box-sizing: border-box;
}
html,body{
margin: 0; padding: 0;
}
.actions{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: center;
height: 100vh;
border: 3px solid #333;
}
.actions img{
width: 200px; height: 200px;
margin: 10px;
background-color: #333; color: #fff;
font-size: 5rem;
border-radius: .5rem;
}justify-content 와 align-items 설정을 수정하면 아래와 같이 된다.
참고로 columns 속성을 사용하면 플럭스박스보다 간단히 해결된다. columns 속성을 사용하는 예제는 아래에 링크를 걸어두었다.
https://syleemomo.tistory.com/52
칼럼 (Column) 레이아웃
* 칼렘 레이아웃 예시 포토1 포토2 포토3 포토4 포토5 포토6 포토7 포토8 포토9 포토10 포토11 포토12 포토13 포토14 포토15 포토16 포토17 포토18 포토19 포토20 포토21 포토21 포토23 포토24 포토25 포토26
syleemomo.tistory.com
7. 가로세로 비율을 유지하는 반응형 이미지 박스
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>컨테이너에서 아이템들의 너비가 일정비율로 유지되도록 하려면 flex-basis 를 적용하면 된다. 한줄에 3개의 아이템만 나열하려면 flex-wrap: wrap 과 flex-basis: 33.3% 을 설정하면 된다.
*{
box-sizing: border-box;
}
.container{
display: flex;
flex-wrap: wrap;
width: 50%; height: 800px; padding: 10px;
border: 3px solid #333;
}
.container .item{
flex-basis: 33.3%;
background-color: #333; color: #fff;
font-size: 3rem;
border: 2px solid yellow;
}
HTML 코드를 아래와 같이 수정한다.
<div class="container">
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
<div class="item">
<div class="img">이미지</div>
<button>버튼</button>
</div>
</div>아이템에 다시 display: flex 와 flex-direction: column 을 설정해서 이미지와 버튼을 수직으로 나열한다. 버튼에 대한 스타일링을 해준다. 그리고 이미지에는 flex:auto 로 설정해서 컨테이너 사이즈에 따라 반응형이 되도록 한다.
*{
box-sizing: border-box;
}
.container{
display: flex;
flex-wrap: wrap;
width: 50%; height: 800px; padding: 10px;
border: 3px solid #333;
}
.container .item{
flex-basis: 33.3%;
background-color: #333; color: #fff;
font-size: 3rem;
border: 2px solid yellow;
display: flex;
flex-direction: column;
}
.container .item button{
margin-top: auto;
margin-bottom: .5rem; margin-left: .5rem; margin-right: .5rem;
height: 50px;
border: none;
background-color: orange;
cursor: pointer;
}
.container .item .img{
flex: auto; margin-bottom: 10px;
background-color:mediumspringgreen;
}
디바이스 크기가 줄어들때 한줄에 이미지가 2개, 1개만 보이도록 아래와 같이 반응형웹으로 flex-basis를 조절한다.
@media (max-width: 900px){
.container .item{
flex-basis: 50%;
}
}
@media (max-width: 700px){
.container .item{
flex-basis: 100%;
}
}
8. 반응형 페이지네이션 버튼
<div class="actions">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>버튼을 감싸고 있는 컨테이너에 display: flex 를 적용한다.
.actions{
display: flex;
width: 500px; height: 30px;
border: 3px solid #333;
}버튼에 flex: auto 를 설정하면 컨테이너 크기에 따라 버튼의 너비가 변한다. 지금은 고정값이지만 개발자도구에서 컨테이너의 너비값을 변경하면 버튼의 너비도 함께 변한다. flex: auto 는 flex: 1과 동일한 의미로 컨테이너 크기에 따라 내부 아이템이 늘어나거나 줄어든다.
.actions button{
flex: auto;
}버튼에 마우스를 올렸을때 버튼의 너비를 키우려면 flex 값을 1보다 크게 설정하면 된다.
.actions{
display: flex;
width: 500px; height: 30px;
border: 3px solid #333;
}
.actions button{
flex: auto;
transition: .5s;
}
.actions button:hover{
flex: 3;
}이렇게 하면 반응형 페이지 버튼을 만들수 있다.
<div class="actions">
<img src="data:image/jpeg;base64,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" alt="profile-1">
<img src="data:image/jpeg;base64,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" alt="profile-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpwSuc5_00-b2FxK198sY73ArVySbThSLAXQ&usqp=CAU" alt="profile-3">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQEZrATmgHOi5ls0YCCQBTkocia_atSw0X-Q&usqp=CAU" alt="profile-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKDP-4Dg4s4b6YxTTriW24nV5Q0RL65zh7JA&usqp=CAU" alt="profile-5">
</div>.actions{
display: flex;
height: 300px;
border: 3px solid #333;
}
.actions img{
flex: 1; overflow: hidden;
transition: .5s ease-out;
cursor: pointer;
}
.actions img:hover{
flex: 3;
}이미지로 실험해보면 아래와 같이 재미난 효과를 만들수 있다.
object-fit: cover 와 object-position: center 를 적용하면 사진이 중앙위치에서 확대된다.
.actions img{
flex: 1;
transition: .5s ease-out;
cursor: pointer;
object-fit: cover;
object-position: center;
}
헤더와 푸터는 고정값(flex-basis나 width 나 max-width)으로 잡고 메인에 flex:auto를 주면 calc로 계산하지 않고도 헤더와 푸터를 제외한 나머지 영역을 메인이 차지한다.
728x90
'프론트엔드 > HTML & CSS 강의' 카테고리의 다른 글
| 테이블 연습 심화과제 (0) | 2024.02.04 |
|---|---|
| CSS 변수와 함수 (0) | 2023.06.26 |
| 4. 박스모델 (Box Model) (0) | 2023.06.15 |
| 3. 선택자 (0) | 2023.06.12 |
| 2. 색상과 단위 (0) | 2023.06.12 |