CSS'de auto Nedir?

CSS'de auto, bir öğenin boyutunun veya konumunun otomatik olarak belirlenmesi anlamına gelir. Bu özellik özellikle bir öğenin içeriğine veya ebeveyn öğenin boyutuna bağlı olan öğeler için kullanılır.
Auto genel olarak üç farklı şekilde kullanılabilir:
1. Genişlik ve Yukseklik
Genişlik ve yükseklik için auto belirtilen bir öğenin boyutu içeriğe göre ayarlanır. Örneğin, bir resmin boyutu, resmin orijinal boyutlarına göre belirlenir.
```
img {
width: auto;
height: auto;
}
```
2. Sol ve Sağ Kenar Boşlukları
Sol ve sağ kenar boşlukları için auto, öğenin genişliğini otomatik olarak hesaplar. Bu, bir öğenin diğer öğelerle aynı hizada görüntülenmesini sağlar.
```
.container {
width: 80%;
margin: 0 auto;
}
```
3. İç İçe Geçmiş Öğeler
İç içe geçmiş öğeler için auto, iç içe geçmiş öğelerin pozisyonunu belirler. Bu özellik özellikle, bir öğenin boyutu, içindeki diğer öğelerin boyutuna göre belirlenir.
```
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
Kısacası, auto, bir öğenin boyutunun veya konumunun otomatik olarak belirlenmesini sağlayan önemli bir CSS özelliğidir. Yukarıdaki örnek kodlar, farklı senaryolarda nasıl kullanılabileceğini göstermektedir.