min-width

Try it

min-width: 150px;

min-width: 20em;

min-width: 75%;

min-width: 40ch;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Change the minimum width.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: white;
}

Chiều rộng của phần tử được đặt thành giá trị min-width bất cứ khi nào min-width lớn hơn max-width hoặc width.

Cú pháp

/* Giá trị <length> */
min-width: 3.5em;
min-width: anchor-size(width);
min-width: anchor-size(--my-anchor self-inline, 200%);

/* Giá trị <percentage> */
min-width: 10%;

/* Giá trị từ khóa */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fit-content(20em);
min-width: stretch;

/* Giá trị toàn cục */
min-width: inherit;
min-width: initial;
min-width: revert;
min-width: revert-layer;
min-width: unset;

Giá trị

<length>

Xác định min-width là một giá trị tuyệt đối.

<percentage>

Xác định min-width là một tỷ lệ phần trăm theo chiều rộng của khối chứa.

auto

Giá trị mặc định. Nguồn của giá trị tự động cho phần tử được chỉ định phụ thuộc vào giá trị hiển thị của nó. Đối với các hộp block, hộp inline, inline-block và tất cả các hộp bố cục bảng, auto phân giải về 0.

Đối với flex item và grid item, giá trị chiều rộng tối thiểu là kích thước được đề xuất đã chỉ định, chẳng hạn như giá trị của thuộc tính width, kích thước được chuyển đổi, được tính nếu phần tử có aspect-ratio được đặt và chiều cao là kích thước xác định, ngược lại sẽ dùng kích thước min-content. Nếu flex item hoặc grid item là scroll container, hoặc nếu một grid item trải rộng hơn một track cột linh hoạt, kích thước tối thiểu tự động là 0.

max-content

min-width ưu tiên nội tại.

min-content

min-width tối thiểu nội tại.

fit-content

Sử dụng không gian có sẵn, nhưng không vượt quá max-content, tức là min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Sử dụng công thức fit-content với không gian có sẵn được thay thế bằng đối số được chỉ định, tức là min(max-content, max(min-content, argument)).

stretch

Giới hạn chiều rộng tối thiểu của margin box của phần tử bằng chiều rộng của khối chứa. Nó cố gắng làm cho margin box lấp đầy không gian có sẵn trong khối chứa, tương tự như 100% nhưng áp dụng kích thước kết quả cho margin box thay vì hộp được xác định bởi box-sizing.

Note: Để kiểm tra các bí danh được sử dụng bởi trình duyệt cho giá trị stretch và trạng thái triển khai của nó, hãy xem phần Tương thích trình duyệt.

Định nghĩa hình thức

Cú pháp hình thức

min-width = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Ví dụ

Đặt chiều rộng tối thiểu của phần tử

table {
  min-width: 75%;
}

form {
  min-width: 0;
}

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• max-width
• width
• min-inline-size
• min-block-size
• box-sizing
• Hướng dẫn Giới thiệu mô hình hộp CSS
• Mô-đun Mô hình hộp CSS