Spraw, aby elementy elastyczne miały szerokość treści, a nie szerokość kontenera nadrzędnego.

Question

Mam kontener <div> z display: flex. Ma dziecko <a>.

Jak mogę sprawić, aby dziecko wyglądało na "w linii"?

W szczególności, w jaki sposób mogę określić szerokość dziecka określoną przez jego zawartość i nie rozszerzyć do szerokości elementu nadrzędnego?

Co próbowałem:

ustawić dziecku display: inline-flex, ale jeszcze wziął pełną szerokość. Próbowałem także wszystkich innych właściwości wyświetlania, ale nic nie działało.

przykład:

.container { 
 
    background: red; 
 
    height: 200px; 
 
    flex-direction: column; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 
a { 
 
    display: inline-flex; 
 
    padding: 10px 40px; 
 
    background: pink; 
 
}

<div class="container"> 
 
    <a href="#">Test</a> 
 
</div>

http://codepen.io/donpinkus/pen/YGRxRY

Answer 1

Zastosowanie align-items: flex-start na pojemniku lub align-self: flex-start na elementy giętkie.

Nie trzeba dla display: inline-flex.

---

Początkowe ustawienie elastycznego pojemnika to align-items: stretch. Oznacza to, że elementy elastyczne rozciągną się, aby pokryć całą długość pojemnika wzdłuż osi poprzecznej.

Obiekt align-self robi to samo, co align-items, chyba że align-self dotyczy Flex elementów podczas align-items odnosi się do elastycznego pojemnika.

Domyślnie align-self dziedziczy wartość align-items.

Ponieważ twój pojemnik to flex-direction: column, oś poprzeczna jest pozioma, a align-items: stretch rozszerza szerokość elementu potomnego tak bardzo, jak to możliwe.

Można zastąpić domyślne z align-items: flex-start na kontenerze (który jest dziedziczony przez wszystkie elementy elastyczne) lub align-self: flex-start na produkcie (który jest ograniczony do pojedynczego przedmiotu).

---

Dowiedz się więcej o elastycznego dostosowania wzdłuż poprzecznego osi tutaj:

• How does flex-wrap work with align-self, align-items and align-content?

Dowiedz się więcej o elastycznego dostosowania wzdłuż głównej osi tutaj:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?