Flexbox가 종횡비를 유지하지 않고 이미지를 늘이는 이유는 무엇입니까? 늘어납니다. div { display:

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-self기본값입니다 stretch. 로 설정 align-self합니다 center.

align-self: center;

여기 문서를 참조하십시오 :
align-self

답변

키 속성은 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>

스 니펫 확장

답변

나는 Foundation 메뉴에서 같은 문제에 직면했습니다. align-self: center;나를 위해 일하지 않았다.

내 해결책은 이미지를 <div style="display: inline-table;">...</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 기본값은 늘이기 때문에 늘이는 것입니다. 이 경우 두 가지 해결책이 있습니다. 1. set img align-self : center OR 2. set parent align-items : center

img {

   align-self : 중앙
}

또는 

.부모의 {
  정렬 항목 : 가운데
}

답변