Flex: 1 có nghĩa là gì?

Như chúng ta đều biết, flexbất động sản là một cách viết tắt cho flex-grow, flex-shrinkvà các flex-basistài sản. Giá trị mặc định của nó là 0 1 auto, có nghĩa là

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

nhưng tôi nhận thấy, ở nhiều nơi flex: 1được sử dụng. Nó là viết tắt của 1 1 autohoặc 1 0 auto? Tôi không thể hiểu nó có nghĩa là gì và tôi không nhận được gì khi tôi google.

Đây là lời giải thích:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <positive-number>
Tương đương với flex: <positive-number> 1 0. Làm cho mục flex trở nên linh hoạt và đặt cơ sở flex bằng 0, dẫn đến mục nhận được tỷ lệ không gian trống trong vùng chứa flex được chỉ định. Nếu tất cả các mặt hàng trong container flex sử dụng mẫu này, kích thước của chúng sẽ tỷ lệ với hệ số flex được chỉ định.

Do đó flex:1tương đương vớiflex: 1 1 0

flex: 1 nghĩa là như sau:

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

HÃY CẨN THẬN

Trong một số trình duyệt:

flex:1; không bằngflex:1 1 0;

flex:1;= flex:1 1 0n;(với n là đơn vị độ dài).

• flex-grow: Một con số chỉ định mục sẽ tăng bao nhiêu so với phần còn lại của các mục linh hoạt.
• flex-co Một số chỉ định mục sẽ co lại bao nhiêu so với phần còn lại của các mục linh hoạt
• flex-base Chiều dài của mục. Giá trị pháp lý: "auto", "inherit" hoặc một số theo sau là "%", "px", "em" hoặc bất kỳ đơn vị độ dài nào khác.

Điểm mấu chốt ở đây là cơ sở linh hoạt yêu cầu một đơn vị độ dài .

Trong Chrome chẳng hạn flex:1và flex:1 1 0tạo ra các kết quả khác nhau. Trong hầu hết các trường hợp, nó có vẻ flex:1 1 0;đang hoạt động nhưng hãy kiểm tra xem điều gì thực sự xảy ra:

THÍ DỤ

Cơ sở uốn dẻo bị bỏ qua và chỉ áp dụng uốn phát triển và thu nhỏ uốn.

flex:1 1 0;= flex:1 1;=flex:1;

Điều này thoạt nhìn có vẻ ổn tuy nhiên nếu đơn vị được áp dụng của vùng chứa được lồng vào nhau; sẵn sàng cho những chuyện bất ngờ!

Hãy thử ví dụ này trong CHROME

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

TƯƠNG THÍCH

Cần lưu ý rằng điều này không thành công vì một số trình duyệt đã không tuân thủ đặc điểm kỹ thuật .

Các trình duyệt sử dụng đặc tả linh hoạt đầy đủ:

• Firefox - ✓
• Edge - ✓ (Tôi biết, tôi cũng bị sốc.)
• Chrome - x
• Dũng cảm - x
• Opera - x
• IE - (lol, nó hoạt động mà không có đơn vị độ dài nhưng không hoạt động với một đơn vị.)

CẬP NHẬT 2019

Các phiên bản mới nhất của Chrome dường như cuối cùng đã khắc phục được vấn đề này nhưng các trình duyệt khác vẫn chưa khắc phục được.

Đã thử nghiệm và hoạt động trong Chrome Ver 74.