Semua tentang kata kunci otomatis dalam CSS

Properti lebar: otomatis

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’

<div class="wrapper">
  <div class="item"></div>
</div>

* {
    box-sizing: border-box;
}

.wrapper {
      max-width: 600px;
      margin: 2rem auto 0;
      padding: 1rem;
}

.item {
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

.item {
      width: 100%;
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ = 15 + 16 + 506 + 16 + 15 = 568px

▍ Gunakan kasing untuk lebar: otomatis

Lebar elemen yang berbeda dalam versi halaman seluler dan desktop

<div class="group">
    <div class="group__item">
        <button class="c-button">Sign In</button>
    </div>
    <div class="group__item">
        <button class="c-button c-button--ghost">Register</button>
    </div>
</div>

.group {
    display: flex;
}

.group__item {
    width: 50%;
}

@media (min-width: 800px) {
    /*    flexbox-    */
    .group {
        display: block;
    }

    .group__item {
        width: auto;
    }
}

Properti tinggi: otomatis

<div class="wrapper">
  <div class="item">What's my height?</div>
</div>

1. Anda bisa mengatur elemen dengan kelas dengan .wrapperketinggian tetap, dan kemudian menambahkan .itemproperti ke gaya elemen height: 100%.
2. Anda dapat menggunakan .wrappertata letak flexbox untuk elemen , sehingga anak .itemitu, secara default, akan direntangkan ke ukuran elemen induk.

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}

Bidang dan kata kunci otomatis

.element {
    margin-left: auto;
    margin-right: auto;
}

▍Gunakan margin: properti otomatis untuk elemen yang benar-benar diposisikan

1. Lebar dan tinggi elemen ditentukan.
2. Properti elemen diatur position: absolute.

<div class="wrapper">
  <div class="item">I am centered.</div>
</div>

.wrapper {
    position: relative;
}

.item {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Layout Flexbox dan kustomisasi bidang otomatis

.wrapper {
    display: flex;
}

.item-2 {
    margin-left: auto;
}

.item-2 {
    margin-top: auto;
}

.item-1 {
    margin: auto;
}

▍ Properti fleksibel dan nilai otomatis

    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }

<div class="wrapper">
  <div class="item item-1">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    height: 500px;
}

.item-1 {
    flex: auto;
}

Tata letak kisi dan nilai otomatis

▍Gunakan otomatis untuk menyesuaikan kolom

.wrapper {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
}

▍ Tata letak yang bagus dan menggunakan nilai otomatis untuk mengatur bidang

    .item-1 {
        margin-left: auto;
    }

▍ tata letak RTL

Properti melimpah

.element {
    overflow-y: scroll;
}

Properti untuk elemen penentuan posisi

.wrapper {
    position: relative;
    padding: 16px;
}

.item {
    position: absolute;
    width: 100px;
    height: 100px;
}

.wrapper {
    position: relative;
}

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

@media (min-width: 800px) {
    .item {
        /*  -  left: 16px */
        left: auto;
    }
}

Contoh menggunakan nilai otomatis

▍ Panah tooltip

.tooltip:before {
    /*   */
    position: absolute;
    left: -15px;
}

/*    ,   */
.tooltip.to-right:before {
    /*   */
    position: absolute;
    left: auto;
    right: -15px;
}

.tooltip:before {
    position: absolute;
    right: 100%;
}

.tooltip.to-right:before {
    /*   */
    position: absolute;
    right: auto;
    left: 100%;
}

▍ Kartu Komponen

.card .icon {
    position: absolute;
    left: 15px;
    top: 15px;
}

.card.is-right .icon {
    left: auto;
    right: 15px;
}

▍ Tata letak kotak dan nilai properti margin otomatis

<div class="item">
    <div class="item-group">
        <!--    -->
    </div>
    <button class="item__action">Confirm</button>
</div>

    .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .item__action {
        margin-left: auto;
    }

.item__action {
    margin-inline-start: auto;
}

▍ Tata letak dan nilai margin otomatis

<p class="input-group">
    <label for="">Full Name</label>
    <input type="email" name="" id="">
</p>

.input-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: 0.7fr 2fr;
  }
}

.input-group label {
    margin-left: auto;
}

▍ Desain jendela modal

.modal-body {
    overflow-y: auto;
}

Ringkasan