Flexbox는 이미지를 원래 높이로 늘이는 동작이 있습니다. 즉, 자식 이미지가있는 flexbox 컨테이너가 있고 해당 이미지의 너비를 조정하면 높이가 전혀 조정되지 않고 이미지가 늘어납니다.
div {
display: flex;
flex-wrap: wrap;
}
img{
width: 50%
}<div>
<img src="https://loremflickr.com/400/300" >
<h4>Appify</h4>
<p> some text </p>
</div>원인은 무엇입니까?
내가 의미하는 바를 보여주기 위해이 CodePen 을 추가했습니다 .
align-items: stretch/ align-self: stretch입니다. 각 항목 제거 주위에 테두리를 추가하는 경우 wrap, 당신은 모든 항목이 모든 브라우저에서 스트레칭 알 수 있습니다 : codepen.io/anon/pen/oLXBVx?editors=1100
답변:
때문에 스트레칭 align-self기본값입니다 stretch. 로 설정 align-self합니다 center.
align-self: center;
여기 문서를 참조하십시오 : align-self
align-self: start;이미지가 수직 (CSS 없음)하는 어떤 styleless 이미지와 같은 그들의 용기 (안 센터)의 TOP에 정렬해야하기 때문에 강한 해답이 될 수 있습니다. 어느 쪽이든 두 답변 모두 스트레칭을 수정합니다. 따라서 OP가 원하는 것이 무엇인지에 따라 다릅니다. OP의 게시물에서 '수직 중심'인상을 얻지 못했습니다.
align-self: [flex-start, center...others]이미지가 플렉스 컨테이너 너비의 100 %를 차지하지 않도록합니다. align-self:center물론 수정하지만 컨테이너 사용의 시작 또는 끝에서 이미지를 시작하려면align-items: flex-start or flex-end
align-items: center부모 에게 (또는 귀하의 필요에 맞는 모든 정렬) 배치 할 수 있습니다 .
키 속성은 align-self: center다음과 같습니다.
.container {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
}
img.align-self {
align-self: center;
}<div class="container">
<p>Without align-self:</p>
<img src="http://i.imgur.com/NFBYJ3hs.jpg" />
<p>With align-self:</p>
<img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>margin이미지 정렬에 :을 원했기 때문에 다음 image을 left-aligned추가했습니다.
img {
margin-right: auto;
}
마찬가지로에 대해 다음 image을 right-aligned추가 할 수 있습니다.margin-right: auto; . 스 니펫은 두 가지 유형의 정렬에 대한 데모를 보여줍니다.
행운을 빕니다...
div {
display:flex;
flex-direction:column;
border: 2px black solid;
}
h1 {
text-align: center;
}
hr {
border: 1px black solid;
width: 100%
}
img.one {
margin-right: auto;
}
img.two {
margin-left: auto;
}<div>
<h1>Flex Box</h1>
<hr />
<img src="https://via.placeholder.com/80x80" class="one"
/>
<img src="https://via.placeholder.com/80x80" class="two"
/>
<hr />
</div>
align-self:flex-start이미지로 수정할 수 있습니다 . 이유를 모르겠습니다. 아마도 크롬의 기본값이 스트레치 일 수 있습니다.