6번은 각각 컨텐츠의 여백을 똑같이 주는거다(공간에 따른) 5,6번이 비슷해보이지만 차이가 있다.
플랙스의 기본 값으로 자손은 부모의 값을 따라가게 된다.
5번은 글자 크기를 기준으로 하여 위치를 맞추는 것이다.
순서변경
flex-basis : 부모의 크기를 줄어들때 자손의 크기를 어떻게 할지 정하는것것
기본 크기는 항상 200으로 하겟다는 뜻 기본값을 지정하는것이다.
padding: 20px;
background: tomato;
color: #fff;
border: 1pxsolid#2a0c0c;
width: 200px;
flex-basis: 1;
height: 100px;
.item{
padding: 20px;
background: tomato;
color: #fff;
border: 1pxsolid#2a0c0c;
width: 200px;
flex-basis: 200px;
height: 100px;
기본크기를 없애거나 줄이는것
padding: 20px;
background: tomato;
color: #fff;
border: 1pxsolid#2a0c0c;
width: 200px;
flex-basis: 0;
height: 100px;
/* flex-basis: 0; */
부모를 1200px으로 설정하고 자손을 각각 200으로 설정하였다 부모의 공간이 400px 남게되고 이떄 자손의 크기가 늘어날수 있도록 설정하는것이 플렉스 grow 반대로 줄여주는 것이 플렉스 싱크이다.
예를 들어 부모 - 1200 자손 각 200*4 로 남은 공간이 400이기떄문에 각 자손에게 100씩 줄수가 있게 된다.
자손이 abcd 잇다고 하면 c에게는 주고 싶지 않을 경우 수치를 0으로 설정하면 기존에 설정하였던 값으로 설정이 되고 남은 200은 d에게 주었을때 a,b는 100만큼 늘어나고 c는 유지 d는 200까지 늘어나게 되는것이다.
빈부분을 채우는걸 설정하는것이 flex-grow
.item:nth-child(1){flex-grow: 1;}
.item:nth-child(2){flex-grow: 1;}
.item:nth-child(3){flex-grow: 0;}
.item:nth-child(4){flex-grow: 2;}
가변 그리드 레이어식
부모가 자손보다 작아질때 실행하게 되면 플렉스를 적용해 놓으면 자손이 자시느이 크기를 줄여서 부모에게 맞춘다.
이때 자손이 일정하게 줄어드는데 중요도에 따라 설정하고자 하는 값을 넣어줄수있다.
.wrap2{width: 600px;}
.wrap2 item:nth-child(1){flex-shrink: 0;}
.wrap2 item:nth-child(2){flex-shrink: 2;}
.wrap2 item:nth-child(3){flex-shrink: 1;}
.wrap2 item:nth-child(4){flex-shrink: 1;}
flex-grow개념에서 반대로 생각하면 된다 (-00배 같은느낌) A가 가장중요하여 크기를 줄이지 않고 유지하고 B는 줄이고 C,D는 비슷하게 두고자 할때 a는 0배 b는 -2배 c,d는 -1배 같은 느낌이다.
a태그와 바디의 컬러를 같이 해놔야 눌러도 a태그 색이 바뀐느낌을 주지 않는데 바디를 바꾸게 되면 다 바꿔야하기때문에 이때 설정하는것이 'inherit' 이다.
a{
text-decoration: none;
color: inherit;
/*inherit 속성은 부모 속성값을 그대로 상속받는것*/
}
body{
color: #777;
}
ㅇ
이미지 크기를 감싸고 있는 부모태그가 줄어들어도 어디까지는 유지하겟다고 할때는 max-width를 사용한다.
img{
max-width: 100%;
}
/*이미지 태그를 감싸고 있는 부모태그의 크기에 따라서 이미지의 크기를 조정하지만 이미지의 원래 크기 이상으로는 커지지 않는다.*/
보통 제목태그를 글자크기가 부모를 따라가지 않는데 상속을 원할 경우에는
h3{
font-size: inherit;
color: #111;
}
inherit를 사용하면 상속이 가능하다.
#container{
width: 1200px;
margin: 0auto;
border: 1pxdottedorangered;
}
세로로 이미지가 배치된다. 가로가 메인축으로 해서 가로로 이미지 4개를 배치하고 싶을 경우 이때 컨테이너에게 (부모)
플렉스를 주면 된다.
#container{
width: 1200px;
margin: 0auto;
border: 1pxdottedorangered;
display: flex;
}
하지만 그냥 넣게 되면 그냥 배치 되기 떄문에 줄바꿈 명령을 넣어야 한다.
#container{
width: 1200px;
margin: 0auto;
border: 1pxdottedorangered;
display: flex;
flex-wrap: wrap;
}
그때 사용하는 것이 flex-wrap : wrap 이다. 이때 p태그 때문에 이미지와 맞지 않게 튀어나가게 되는데 이때 hidth 값을 주어야 한다 하지만 이미지의 width 값을 모른다. 이때 사용 하는것이 상대값으로 적용되는 %를 넣어주면 된다.
.item{
width: 25%;
}
이때 여백을 위해서 퍼센트를 줄여서 넣게 되면 왼쪽으로 붙어버리게 된다.
#container{
width: 1200px;
margin: 0auto;
border: 1pxdottedorangered;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item{
width: 23.5%;
}
.item{
width: 23.5%;
margin-bottom: 40px;
}
각 컨텐츠간의 사이를 일정하게 비우게 하기 위해서 justify-content: space-between 을 넣어주면 일정하게 간격이 띄워지고 위아래 컨텐츠간의 여백은 모든 컨텐츠에 일정하게 들어가기 때문에 margin으로 넣어주면 된다.
#container{
max-width: 1600px;
margin: 0auto;
border: 1pxdottedorangered;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item{
width: 18%;
margin-bottom: 20px;
}
* 예를 들어서 컨텐츠를 5개 넣고 싶을때는 부모의 값에서 (주로 100%) 원하는 자식의 가로에서 배치되는 컨텐츠 값(5)을 나누어주면 20이 나오게 된다 그렇기 때문에 자식의 width값을 20%로 주어서 넣어주면 부모의 크기를 줄여도 그 크기에 맞게 5개가 들어가게 되고 여백을 주고싶다면justify-content: space-between와 20%에서 임의로 줄여주면 여백이 생기게 된다.
<style>
*{margin: 0; padding: 0;
box-sizing: border-box;}
a{
text-decoration: none;
}
ul{
list-style: none;
}
#container{
background: #111;
padding: 100px;
}
.social{
border: 1pxdottedorange;
width: 240px;
}
.socialli{
width: 48px; height: 48px;
border: 1pxsolid#fff;
border-radius: 50%;
}
</style>
.social{
border: 1pxdottedorange;
width: 280px;
display: flex;
.social{
border: 1pxdottedorange;
width: 280px;
display: flex;
justify-content: space-between;
다 채워지지 않는다 이는 해당 영역이 많지 않기 때문
li 태그 자체에 높이와 크기를 넓히고 채워줄 수 있따.
#container{
background: #111;
padding: 100px;
text-align: center;
/* display: inline-flex; */
}
.social{
border: 1pxdottedorange;
width: 280px;
display: inline-flex;
justify-content: space-between;
}
.socialli{
width: 48px; height: 48px;
border: 1pxsolid#fff;
border-radius: 50%;
}
.link{
/* background: yellow; */
/* display: block; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
- 2daepth 적용
인라인에 패딩값을 주면 부모인 블럭을 밀어내지 못한다.
.gnbli.link{
background: rgba(255, 255, 0, .3);
padding: 10px0;
}
.gnbli.link{
background: rgba(255, 255, 0, .3);
padding: 10px0;
display: block;
네비게이션 a 태그는 display에서 꼭 블럭을 주어야 자손이 부모를 패딩만큼 밀어내서 영역을 만들수가 있다.
<style>
*{margin: 0; padding: 0;
box-sizing: border-box;}
a{
text-decoration: none;
color: inherit
}
ul{
list-style: none;
}
body{}
#container{
padding: 50px;
border-bottom: 1pxsolid#eaeaea;
}
.gnb{
border: 1pxdottedorangered;
width: 1000px;
margin: auto;
display: flex;
}
.gnbli{
width: 16.666666%;
background: #eee;
border: 1pxsolidred;
text-align: center;
}
.gnbli.link{
background: rgba(255, 255, 0, .3);
padding: 10px0;
display: block;
}
</style>
적용되어있는 back과 border를 제외시키면 우리가 주로 보는 2deapth가 된다.
.gnb{
display: flex;
width: 1000px;
margin: auto;
}
display로 가로로 배치해주고 넓이를 넣고 가운데 배치를 위해서 마진을 auto로 넣어준다.
justfiy-contnet 는 가로 정렬과 같은것
justfiy-contnet : space-between 는 사이를 일정하게 하는것
justfiy-contnet : space-evenly 는 주변에 맞춰서 일정하게 크기를 주는것이다. 일정한 크기가 아니라면 이것도 좋다.
.gnbli{
width: 20%;
text-align: center;
글자의 크기를 가운데 주고 싶으면 메뉴 자체에 center 을 주는것이 아니라 li 자체에 주어야 그 안의 내용이 중앙정렬이 된다.
.gnbli.link{
padding: 10px0;
display: block;
링크 자체에 display : block을 넣어 인라인 태그의 속성을 유지 하면서 블럭 태그로 보이도록 한다.
