최대 5 개의 항목과 3 개의 작은 항목을 가진 flexbox 탐색을 시도하지만 모든 요소간에 너비를 균등하게 나누지는 않습니다.
깡깡이
내가 모델링 한 튜토리얼은 http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ 입니다 .
SASS
* {
font-size: 16px;
}
.tabs {
max-width: 1010px;
width: 100%;
height: 5rem;
border-bottom: solid 1px grey;
margin: 0 0 0 6.5rem;
display: table;
table-layout: fixed;
}
.tabs ul {
margin: 0;
display: flex;
flex-direction: row;
}
.tabs ul li {
flex-grow: 1;
list-style: none;
text-align: center;
font-size: 1.313rem;
background: blue;
color: white;
height: inherit;
left: auto;
vertical-align: top;
text-align: left;
padding: 20px 20px 20px 70px;
border-top-left-radius: 20px;
border: solid 1px blue;
cursor: pointer;
}
.tabs ul li.active {
background: white;
color: blue;
}
.tabs ul li:before {
content: "";
}
<div class="tabs">
<ul>
<li class="active" data-tab="1">Pizza</li>
<li data-tab="2">Chicken Noodle Soup</li>
<li data-tab="3">Peanut Butter</li>
<li data-tab="4">Fish</li>
</ul>
</div>
답변
당신이 연결 한 기사에서 언급되지 않은 중요한 부분이 flex-basis
있습니다. 기본적으로 flex-basis
입니다 auto
.
에서 사양 :
지정된 플렉스 기준이 자동 인 경우 사용 된 플렉스 기준은 플렉스 항목의 기본 크기 속성 값입니다. (자체는 내용에 따라 flex 항목의 크기를 지정하는 키워드 auto 일 수 있습니다.)
각 플렉스 아이템은 flex-basis
초기 크기와 비슷한 것을 가지고 있습니다. 그런 다음 남은 여유 공간이 flex-grow
항목들 사이 에 비례 적으로 분배 됩니다. 로 auto
, 그 기준은 내용 크기 (또는로 정의 된 크기 width
등)입니다. 결과적으로 텍스트가 더 큰 항목은 예제에서 전체적으로 더 많은 공간이 제공됩니다.
요소를 완전히 균일하게하려면을 설정할 수 있습니다 flex-basis: 0
. 이렇게하면 플렉스 기준이 0으로 설정되고 나머지 공간 (모든 기준이 0이므로 모든 공간이 됨)이에 따라 비례 적으로 분배됩니다 flex-grow
.
li {
flex-grow: 1;
flex-basis: 0;
/* ... */
}
사양의이 다이어그램 은 요점을 잘 설명해줍니다.
답변
를 사용하여 너비가 같은 요소를 만들려면 Flex
자녀의 자녀 (플렉스 요소)로 설정해야합니다.
flex-basis: 25%;
flex-grow: 0;
25 % 행의 모든 요소에 적용됩니다. 그들은 하나씩 성장하지 않을 것입니다.