너비가 모두 같은 일부 항목이있는 flexbox를 사용하고 싶습니다. flexbox가 공간 자체가 아닌 공간을 균등하게 분산시키는 것으로 나타났습니다.
예를 들면 다음과 같습니다.
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
첫 번째 항목은 두 번째 항목보다 훨씬 큽니다. 3 개 항목, 4 개 항목 또는 n 개 항목이있는 경우 모든 항목이 같은 줄에 항목 당 동일한 공간으로 표시되기를 원합니다.
어떤 아이디어?
http://codepen.io/anon/pen/gbJBqM
답변
자신이 너무 그들을 설정 flex-basis
입니다 0
(모든 요소가 동일한 출발점이 때문에), 그 성장 할 수 있습니다 :
flex: 1 1 0px
IDE 또는 linter가 언급 할 수 있습니다 the unit of measure 'px' is redundant
. ()와 같이 그대로두면 flex: 1 1 0
IE는 이것을 올바르게 렌더링하지 않습니다. 따라서 px
@fabb의 의견에서 언급했듯이 Internet Explorer를 지원해야합니다.
답변
flex-basis: 100%
이를 달성하기 위해 추가 할 수 있습니다 .
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
그 가치 flex: 1
에 따라 동일한 결과 에도 사용할 수 있습니다 .
의 속기 flex: 1
와 동일한 flex: 1 1 0
등가이다 :
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
답변
width: 0
항목의 내용이 커질 경우 열을 동일하게 만들 려면 추가해야합니다 .
.item {
flex: 1 1 0;
width: 0;
}
답변
Adam ( flex: 1 1 0
) 이 허용하는 답변 은 너비가 고정되거나 조상에 의해 결정된 flexbox 컨테이너에 완벽하게 작동합니다. 아이들이 용기에 맞는 상황.
그러나 가장 큰 하위를 기준으로 동일한 크기의 하위 컨테이너를 갖는 컨테이너를 하위 컨테이너에 맞추려는 상황이있을 수 있습니다. 다음 중 한 가지 방법으로 flexbox 컨테이너를 자식에 맞출 수 있습니다.
- 설정
position: absolute
하지 설정width
하거나right
, 또는 - 래퍼 안에 넣습니다.
display: inline-block
이러한 인 flexbox 용기의 경우, 허용 대답은 수행 하지 작업을, 아이들은 같은 크기되지 않습니다. flexbox의 한계라고 생각합니다. Chrome, Firefox 및 Safari에서도 동일하게 동작하기 때문입니다.
해결책은 flexbox 대신 격자를 사용하는 것입니다.
데모 : https://codepen.io/brettdonald/pen/oRpORG
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>
<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>
<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>
<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>
<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
body {
margin: 1em;
}
.wrap-inline-block {
display: inline-block;
}
#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}
#div2, #div4 {
position: absolute;
left: 1em;
}
#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}
#div0, #div1, #div2 {
display: flex;
}
#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}
#div0 {
margin-bottom: 1em;
}
#div2 {
top: 15.5em;
}
#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#div4 {
top: 28.5em;
}
답변
플렉스에 대한 전문가는 없지만 내가 다루고있는 두 가지 항목의 기준을 50 %로 설정하여 거기에 도달했습니다. 1로 증가하고 0으로 줄입니다.
인라인 스타일링 : flex: '1 0 50%',