html لماذا امتداد flexbox لصوري؟



flex wrap (4)

يحتوي Flexbox على هذا السلوك حيث يتمدد الصور إلى ارتفاعها الطبيعي. بمعنى آخر (أكثر تحديدًا) ، إذا كان لدي حاوية فليكس بوكس ​​تحتوي على صورة فرعية ، وقمت بتغيير حجم عرض تلك الصورة ، لن يتم تغيير حجم الارتفاع على الإطلاق ويتم تمديد الصورة.

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

وهذه الأنماط

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

أضفت هذا codepen لإظهار ما أعنيه. ما الذي يسبب هذا؟


Answer #1

إضافة margin لمحاذاة الصور:

نظرًا لأننا أردنا أن تكون image left-aligned إلى left-aligned ، أضفنا:

img {
  margin-right: auto;
}

بالمثل ، لكي تتم right-aligned 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>


Answer #2

المفتاح هو 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>


Answer #3

استخدام كتلة العرض للصورة الموجودة داخل الحاوية المرنة


Answer #4

إنها تمتد لأن القيمة الافتراضية align-self stretch . ضبط align-self center .

align-self: center

انظر الوثيقة هنا: align-self





flexbox