CSS में ऑटो कीवर्ड के बारे में सब

चौड़ाई संपत्ति: ऑटो

‘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

▍ चौड़ाई के लिए मामलों का उपयोग करें: ऑटो

पृष्ठ के मोबाइल और डेस्कटॉप संस्करणों में तत्वों की विभिन्न चौड़ाई

<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;
    }
}

ऊंचाई की संपत्ति: ऑटो

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

1. आप एक वर्ग को एक .wrapperनिश्चित ऊँचाई के साथ एक तत्व सेट कर सकते हैं , और फिर एक तत्व को तत्व शैली में जोड़ सकते .itemहैं height: 100%।
2. आप तत्व के लिए .wrapperफ्लेक्सबॉक्स लेआउट का उपयोग कर सकते हैं , ताकि बच्चा .itemडिफ़ॉल्ट रूप से मूल तत्व के आकार तक खिंच जाए।

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}

फ़ील्ड और कीवर्ड ऑटो

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

मार्जिन का उपयोग: बिल्कुल तैनात तत्वों के लिए ऑटो संपत्ति

1. तत्व की चौड़ाई और ऊंचाई निर्दिष्ट है।
2. आइटम प्रॉपर्टी सेट की गई है 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;
}

Flexbox लेआउट और ऑटो क्षेत्र अनुकूलन

.wrapper {
    display: flex;
}

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

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

.item-1 {
    margin: auto;
}

Lexफ्लेक्स प्रॉपर्टी और ऑटो वैल्यू

    .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;
}

ग्रिड लेआउट और ऑटो मूल्य

स्तंभ समायोजित करने के लिए ऑटो का उपयोग करें

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

FieldsGrid लेआउट और खेतों को सेट करने के लिए ऑटो मूल्य का उपयोग करना

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

▍RTL लेआउट

ओवरफ्लो संपत्ति

.element {
    overflow-y: scroll;
}

तत्वों की स्थिति के लिए गुण

.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;
    }
}

ऑटो मूल्य का उपयोग करने के उदाहरण

Arrow टूलटिप तीर

.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%;
}

Card घटक कार्ड

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

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

PropertyFlexbox लेआउट और ऑटो मार्जिन संपत्ति का मूल्य

<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;
}

▍Grid लेआउट और ऑटो मार्जिन मूल्य

<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;
}

▍ मोडल खिड़कियों का डिजाइन

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

सारांश