Giá trị Auto trong CSS

1. Introduction

Width: Auto

width mặc định của các block-element như <div> hoặc <p> đều là auto, điều này làm cho chúng chiếm toàn bộ chiều rộng của block chứa chúng.

Theo thông số CSS:

   ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block

Khi một element có width là auto, nó có thể có margin, padding và border mà không trở nên lớn hơn phần tử cha chứa nó.

Và width nội dung bên trong nó sẽ là width của phần tử cha trừ đi margin, padding và border.

Hãy xem mô hình ở trên là một ví dụ trong thực tế.

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

width của .item bị ràng buộc trong cha của nó (.wrapper).

Tuy nhiên, điều gì sẽ xảy ra nếu chúng ta thay đổi width của .item thành 100% thay vì auto?

.item sẽ chiếm 100% giá trị width của phần tử cha, cộng với margin ở bên trái và bên phải.

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

Chiều rộng của .item là 568px, là tổng của các thông số sau:

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

Nếu hướng là ltr(left to right), lề phải sẽ hoàn toàn bị bỏ qua.

Trong trường hợp của chúng ta, điều đó xảy ra. Tuy nhiên, nếu bố cục là rtl(right to left), thì lề bên trái sẽ bị bỏ qua.

Demo:

Use Cases For Width: Auto

Different Width Between Mobile And Desktop

Chúng ta có một group các button.

Trên thiết bị di động, chúng ta muốn chúng ở cạnh nhau (mỗi wrapper bọc button chiếm 50% kích thước cha của nó), trong khi trên giao diện desktop, mỗi wrapper sẽ chiếm toàn bộ width cha bọc nó.

Làm thế nào đây?

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

Chúng ta sử dụng flexbox để làm cho các nút xuất hiện bên cạnh nhau.

.group {
  display: flex;
}

.group__item {
  width: 50%;
}

Và trên desktop, ta cần mỗi wrapper có full-width.

Trong trường hợp đó, ta có thể muốn sử dụng width: 100% phải không? Thật ra là có một giải pháp tốt hơn.

@media (min-width: 800px) {
  /* Revert the wrapper to a block element instead of flex */
  .group {
    display: block;
  }

  .group__item {
    width: auto;
  }
}

Vì .group__item là một block-element, việc sử dụng width: auto cho .group__item sẽ làm cho nó lấp đầy không gian có sẵn của phần tử cha của nó.

Demo:

Height: Auto

Khi nói đến height, mọi thứ sẽ khác. height của một phần tử bằng với nội dung của nó, trong đó giá trị mặc định là auto.

Hãy xem xét ví dụ sau.

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

Để làm cho .item có full height của vùng chứa của nó, chúng ta có thể sử dụng một trong các cách sau:

1. Cung cấp cho .wrapper một height cố định, sau đó thêm height: 100% cho phần tử .item.
1. Sử dụng flexbox cho .wrapper và nó sẽ có align-items: stretch cho .item là giá trị default

.wrapper {
  height: 200px;
}

.item {
  height: 100%;
}

Margins And Auto Keyword

Đối với margin, trường hợp sử dụng phổ biến nhất là để căn giữa các phần tử có width biết trước theo chiều ngang.

Hãy xem xét ví dụ sau:

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

Theo CSS spec

Nếu cả ‘margin-left’ và ‘margin-right’ đều là ‘auto’, thì các giá trị đã sử dụng của chúng bằng nhau. Điều này làm căn giữa phần tử theo chiều ngang đối với các cạnh của khối chứa.

Demo:

Margin auto With Absolutely Positioned Elements

Một trường hợp sử dụng khác ít phổ biến hơn để căn giữa một phần tử có position: absolute đó là sử dụng margin: auto.

Khi chúng ta có một phần tử cần được căn giữa theo chiều ngang và chiều dọc bên trong phần tử gốc của nó, chúng ta chắc chắn sẽ sử dụng translateX hoặc translateY.

Ngoài ra còn một cách là sử dụng margin: auto

Để kỹ thuật trên hoạt động, chúng ta cần những điều sau:

1. Chiều rộng và chiều cao cần thiết lập.
1. Phần tử cần có 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;
}

Demo:

Flexbox

Sử dụng margin: auto với flexbox có thể rất hữu ích trong một số trường hợp sử dụng.

Khi một phần tử con có margin: auto, nó sẽ bị đẩy ra xa sang phía đối diện.

Ví dụ: nếu một mục flex có margin-left: auto, nó sẽ được đẩy sang ngoài cùng bên phải.

Hãy xem xét mô hình sau. Chúng ta có hai item, chắc chắn rằng wrapper có display: flex;.

Chúng ta muốn .item-2 được đẩy sang bên phải. margin: auto là hoàn hảo cho việc đó!

.wrapper {
  display: flex;
}

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

Không chỉ vậy, nó còn có thể hoạt động theo hướng ngang hoặc dọc. Xem ví dụ sau:

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

Ngoài ra, nếu chúng ta chỉ có một .item, chúng ta có thể sử dụng margin: auto để căn giữa nó theo cả chiều ngang và chiều dọc.

.item-1 {
  margin: auto;
}

Flex Property And `auto` Keyword

Trong flexbox, chúng ta có thể sử dụng flex: auto cho một item con.

Điều đó nghĩa là khi một item con có flex: auto, tương đương với flex: 1 1 auto, nghĩa là:

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

Item có size phụ thuộc theo width và height của nó, nhưng grows sẽ lấp đầy bất kỳ không gian trống thừa nào trong flex container và shrink đến kích thước tối thiểu để vừa với container. Điều này tương đương với cài đặt flex: 1 1 auto.

Item có flex: auto sẽ có kích thước dựa width và height của nó, nhưng nó có thể grow hoặc shrink tùy thuộc vào không gian mở rộng có sẵn.

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

Demo:

CSS Grid And Auto

Setting An `auto` Column

Trong CSS grid, chúng ta có thể đặt một cột thành auto, có nghĩa là width của nó sẽ dựa trên độ dài nội dung của nó. Xem phần bên dưới:

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

Grid And `auto` Margins

Khi grid CSS được sử dụng, margin: auto có thể được sử dụng để đạt được kết quả tương tự như flexbox.

Khi chúng ta có một grid và các grid item có margin-left: auto chẳng hạn, nó sẽ được đẩy sang phải và width của nó sẽ dựa trên độ dài nội dung của nó.

Hãy xem xét ví dụ sau.

Chúng ta muốn width của .item-1 dựa trên nội dung của nó, không dựa trên grid.

Bằng cách sử dụng margin-left: auto, chúng ta có thể đạt được những điều sau:

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

Right To Left Layouts

Điều đáng nói là sử dụng margin-left: auto hoặc margin-right: auto có thể hoạt động tốt cho các bố cục từ trái sang phải, như tiếng Anh.

Tuy nhiên, hãy cẩn thận để lật những giá trị đó khi làm việc trên một trang web đa ngôn ngữ.

Thậm chí tốt hơn, chúng ta nên sử dụng thuộc tính flexbox hoặc grid trong trường hợp các yêu cầu có thể được thực hiện với chúng.

Nếu không, hãy sử dụng margin: auto là phương sách cuối cùng của bạn và thay vào đó, hãy sử dụng các thuộc tính logic CSS.

Overflow Property

Khi chúng ta có một phần tử, chúng ta nên nghĩ về nội dung tối thiểu và tối đa mà nó cần.

Nếu nội dung vượt quá mức tối đa, thì chúng ta cần hiển thị scroll.

Bạn có thể dễ dàng sử dụng:

.element {
  overflow-y: scroll;
}

Tuy nhiên, điều này có thể hiển thị scroll ngay cả khi chiều cao nội dung ngắn. Xem ví dụ bên dưới:

Trong Chrome Windows, scroll luôn được hiển thị. Đây là hành vi không chính xác và thừa thãi.

Thay vào đó, bằng cách sử dụng từ khóa auto, chúng ta có thể đảm bảo rằng thanh cuộn sẽ không được hiển thị trừ khi chiều cao nội dung lớn hơn vùng chứa của nó.

.element {
  overflow-y: auto;
}

Positioning Properties

Đối với các thuộc tính position CSS top, right, bottom, and left, chúng ta có thể sử dụng từ khóa auto làm giá trị cho chúng.

Hãy xem xét mô hình sau:

Chúng ta có một wrapper có padding và có một mục con. Item con đã được có position: absolute và vẫn không có bất kỳ thuộc tính định vị nào với nó.

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

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

Trong CSS, có một giá trị ban đầu / mặc định cho mỗi thuộc tính. Nếu tôi kiểm tra item con và đi đến các computed styles, bạn đoán giá trị của thuộc tính bên trái là bao nhiêu?

Giá trị mặc định cho bên trái là 16px.

Tại sao điều đó xảy ra ngay cả khi chúng ta không thiết lập nó?

Lý do là một phần tử có position: absolute có liên quan đến phần tử cha gần nhất của nó với position: relative.

wrapper đó có padding: 16px, vì vậy item con được có left: 16px và top: 16px. Thú vị phải không?

Bây giờ, bạn có thể hỏi, lợi ích của việc đó là gì?

Giả sử rằng item con phải có left: 100px với màn hình nhỏ và reset giá trị left khi ở màn hình lớn hơn (desktop)

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

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

Làm thế nào để đặt lại bên trái trên các cửa sổ xem lớn hơn?

Chúng ta không thể sử dụng left: 0 vì điều này sẽ khiến item con ra sát rìa trái, đó không phải là điều chúng ta muốn.

Hãy xem mô hình dưới đây để biết ý tôi là gì.

Để reset lại item con theo đúng cách, chúng ta nên sử dụng left: auto.

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

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

Điều tương tự cũng áp dụng cho thuộc tính top.

Còn đối với các thuộc tính right và bottom, giá trị mặc định của chúng tương ứng bằng chiều rộng và chiều cao của phần tử.

Hữu dụng phải không nào :v

2. Use Cases And Examples

Tooltip Arrow

Đối với các màn hình chat, chúng ta cần một mũi tên trỏ để làm cho nó rõ ràng hơn phần chat của người dùng nào.

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

/* This is a version where the arrow is pointing to the right */
.tooltip.to-right:before {
  /* Arrow code */
  position: absolute;
  left: auto;
  right: -15px;
}

Lưu ý rằng chúng ta đã sử dụng left: auto để ghi đè left: -15px.

Ngoài ra, ta còn có thể dùng các cách thay thế

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

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

Bằng cách sử dụng 100%, chúng ta đã tránh sử dụng giá trị cố định (chiều rộng mũi tên).

Đây là một giải pháp phù hợp hơn trong việc mở rộng code trong tương lai.

Card Component

Bạn có thể có một card component, cùng với các icon đựoc sắp xếp ở các vị trí khác nhau

Bằng cách sử dụng left: auto, chúng ta có thể có được nội dung như mong đợi

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

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

Flexbox And Auto Margins

Khi nói đến flexbox, khả năng là vô tận.

Bằng cách kết hợp nó với lề maring: auto, chúng ta có thể xây dựng các bố cục mạnh mẽ.

Hãy xem xét ví dụ sau.

Chúng ta có một hàng chứa title, description và button (item__action) ở phía bên phải. Chúng ta muốn đẩy button về phía bên phải.

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

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

.item__action {
  margin-left: auto;
}

Và thế là xong! Bằng cách sử dụng margin-left: auto, button được đẩy sang góc ngoài cùng bên phải.

Tốt hơn nữa, chúng ta có thể sử dụng các thuộc tính logic CSS nếu bạn đang xây dựng một trang web đa ngôn ngữ. CSS sẽ giống như sau:

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

Nếu bạn muốn tìm hiểu thêm về cách tạo kiểu từ phải sang trái, chúng ta có thể tham khảo thêm về RLF Styling 101

CSS Grid And Auto Margins

Khi thêm margin vào grid item, nó có thể là các giá trị cố định, tỷ lệ phần trăm hoặc giá trị auto.

Chúng ta quan tâm hơn đến auto cho bài viết này.

Hãy xem xét ví dụ sau:

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

Tôi muốn căn chỉnh label ở cạnh trái của input. Để làm điều đó, tôi cần style:

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

Modal Design

Khi làm việc trên một modal, điều quan trọng là phải tính đến điều gì sẽ xảy ra nếu chiều cao nội dung lớn hơn chiều cao của modal:

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

Bằng cách đó, nó sẽ chỉ hiển thị thanh cuộn nếu chiều cao nội dung đủ lớn.

3. Conclusion

Bên trên là tìm hiểu về giá trị auto trong CSS, hi vọng giúp ích được cho mọi người

Thank for watching!!!

4. References

Source: https://viblo.asia/p/gia-tri-auto-trong-css-XL6lAG0BKek

flexbox CSS grid markup Auto

Dashboard

Giá trị Auto trong CSS

1. Introduction

Width: Auto

Use Cases For Width: Auto

Different Width Between Mobile And Desktop

Height: Auto

Margins And Auto Keyword

Margin auto With Absolutely Positioned Elements

Flexbox

Flex Property And auto Keyword

CSS Grid And Auto

Setting An auto Column

Grid And auto Margins

Right To Left Layouts

Overflow Property

Positioning Properties

2. Use Cases And Examples

Tooltip Arrow

Card Component

Flexbox And Auto Margins

CSS Grid And Auto Margins

Modal Design

3. Conclusion

4. References

Flex Property And `auto` Keyword

Setting An `auto` Column

Grid And `auto` Margins