플렉스 박스 : 양쪽에 공백 요소가있는 가운데 요소

Question

flexbox를 사용하여 다양한 너비의 7 개 <li> 개의 요소로 구성된 메뉴를 설정하고 있습니다. 내 중간 (소스 순서의 네 번째) <li> 요소는 항상 왼쪽으로 공백을 차지하는 1-331 <li> 요소가 앵커의 일종으로 수평 적으로 가운데에 놓이게하고 <li>의 요소를 차지합니다. 오른쪽 공간.

내가 중심에 노력하고있어 <li> 요소의 부모 플렉스 컨테이너 space-around, space-between뿐만 아니라 align-self: center을 시도,하지만 지금까지 운했습니다. flexbox에 익숙한 사람의 도움을 주시면 감사하겠습니다.

jsfiddle

Answer 1

당신은 당신의 nav 구조를 수정하고 왼쪽 3 개 용기, 센터 및 바로에서 시작해야합니다. DEMO

---

HTML

잘 몇 가지 링크를 개최한다 및 을 왼쪽, 센터는 링크입니다.

<nav> 
<span> 
    <a href="#">aaa </a> 
    <a href="#">aa </a> 
    <a href="#">a </a> 
    </span> 
    <a href="#"> center </a> 
    <span> 
     <a href="#">bbbb </a> 
     <a href="#">bbbbb </a> 
     <a href="#">bbbbbb </a> 
    </span> 
</nav> 

---

CSS

탐색은 display:flex 및 justify-content:space-between 걸릴 것입니다, 그래서 것이다 는 및 바로을 떠났다.

nav, nav span { 
    display:flex; 
    justify-content:space-between; 
    flex-wrap:wrap;/* so they do not overlap each other if space too short */ 
} 

우리는 단지 의사 요소 (또는 빈 요소)를 추가 중심을 향해 왼쪽 바로 및 의 가장자리 간격을 생성합니다.

span:first-of-type:after, 
span:last-of-type:before{ 
    content:''; 
    display:inline-block;/* enough , no width needed , it will still generate a space between */ 
} 

바로 너무 많이 확장 센터을 피하기 위해 flex 값 1보다 높은를 취할 수 및 을 떠났다.

nav > span { 
    flex:2; /* 2 is minimum but plenty enough here */ 
} 

우리의 링크 상자를 그릴 수 있습니다 :

a { 
    padding:0 0.25em; 
    border:solid; 
} 

---

DEMO

Answer 2

내가이 작업을 수행 할 수있는 방법은 세 가지 다른 ul 요소로 항목을 분할하는 것입니다 생각하고, flex 속성을 사용하여 세 열의 크기를 설정하십시오.

외부 열에는 세 개의 요소가 있으므로 flex:3이됩니다. 가운데 정렬 된 열은 하나의 요소 만 가지므로 flex:1이됩니다. 그렇게하면 크기를 조정할 때 flexbox는 큰 기둥에 3 개의 플렉스 단위를 사용하고 가운데 기둥에 1 개의 플렉스 단위를 사용합니다. 임의의 항목에서 다른 수의 항목을 사용해야하는 경우 flex 단위를 변경하여 그 안에 항목 수를 반영하십시오. 오른쪽과 왼쪽 블록에`2 :

근무 바이올린 : jsfiddle