블록 요소의 텍스트 만 클릭

Question

고정 크기 div이 있는데 여기에는 flexbox 레이아웃을 사용하는 여러 인라인 a의 위치가 정해져 있습니다. 내 문제는 앵커의 텍스트 외부에있는 div의 클릭에도 응답해야하지만 flexbox은 디스플레이를 block으로 강제 설정하여 사용자가 배경을 클릭 할 여지를 남기지 않도록 모든 사용 가능한 공간을 차지합니다. div.

HTML :

<div class="poem"> 
    <a class="title">Title</a> 
    <a>1919</a> 
    <a>Lead</a> 
    <a>Bachus</a> 
</div> 

컴파일 된 CSS (내가 사용 SASS) :

.title { 
    font-size: 1.85em; 
} 

.poem { 
    width: 12.5em; 
    height: 12.5em; 
    padding: .0625; 
    background-color: rgba(gray, 0.5); 
    display: inline-flex; 
    flex-direction: column; 
} 

.poem > a { 
    flex: 0 0 auto; 
} 

.poem > a:first-child { 
    flex: 1 1 auto; 
}   

.poem > a:first-child:hover { 
    background-color: rgba(255, 165, 0, 0.5); 
} 

This pen 내가 요소를 배치하는 방법을 보여주고, here가 실제로 할 때 작동하는 방법이다 맴돌거나 클릭했다.

내 질문은 클릭이 요소의 텍스트에 특히이 이루어 졌는지 여부를 감지하는 대안 block에 요소의 표시를 강제로 flexbox을 중지하고 inline을 유지하거나 할 수있는 방법이 있는지입니다.

각 a을 div에 랩핑 할 수 있다는 것을 알았지 만 그것은 의미가 없으므로 최후의 수단으로 남겨 두었습니다.

감사합니다.

Answer 1

.poem { 
    align-items: flex-start; 
} 

.poem > a:first-child { 
    flex: 0 1 auto; 
    margin-bottom: auto; 
} 

http://codepen.io/anon/pen/yGArn