flex 말줄임 width값 못잡을때? / flex gap 자식들 간격 어떻게?

 

1. flex-shrink, flex-grow의 쓰임새?

난 쪼그라 들지 않겠다!!! => flex-shrink: 0;

여백이 남으면 그 남은 여백을 가지겠다 => flex-grow: 1;

아이콘같은 거는 위드값이 줄어도 크기가 안쪼그라 들어야해서 flex-shrink를 써야하고

위드값이 100%에서 자식들이 25%가 3개가 있을때 오른쪽에 나머지 여백이 남는다 그러면 그 여백을 자식들이 가질려면 flex-grow: 1; 을 써주면된다

 

 

2. 말줄임표 줄때 위드값이 벗어나면?

말줄임을 주는 놈에게 => width:100%; min-width:0;

말줄임을 주는 부모에게 => width: 100%; (위드값이 있어야함!!)

말줄임을 주는 부모의 부모에게 => width: 100% (위드값이 있어야함!!)

부모가 인라인으로만 되어있고 위드값이 없으면 안됨

 

----------------------------------------

* 말줄임의 부모에  width:100%; min-width:0;  아래는 2번에 줌

 

 

3. 부모에게 gap 줬는데 자식이 패딩 간격을 맞출수 있나?

width: (100% / n) - (((n -1) / n) * g);

n : 한줄에 보여질 개수,  g: gap(사이간격)

:root {
    --flex-gap: 1rem; 
}
.flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-gap);
}
.flex-items {
    --flex-items: 3; /* 한줄에 보여질 아이템 개수*/
    width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

https://wiryawanadipa.com/blog/calculate-percentage-width-of-flex-items-when-using-gap/

 

 

See the Pen flex by uni (@agosto) on CodePen.