Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

css - Giải thích về cài đặt "flex:1" hoặc "flex-grow:1" trên tất cả các nút tổ tiên trong bố cục flex lồng nhau, xem xét rằng thuộc tính flex không có thứ bậc?

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 08:08:23 28 4
mua khóa gpt4 Nike

Tôi đã đọc nó nhiều lần để làm phát triển linh hoạt Hoạt động như mong đợi, bạn thường cần phải đặt phát triển linh hoạt:1(或 uốn cong: 1) trên phần tử gốc, phần tử gốc, v.v., cho đến tận phần tử gốc.

Khi học flexbox, điều này mang lại cho tôi ấn tượng rằng nó có một hệ thống phân cấp nào đó.

nhưng tôi vừa học được tất cả chảy-* Không có thuộc tính nào có tính phân cấp và chỉ áp dụng trực tiếp cho vùng chứa và các phần tử con trực tiếp của nó.

Tôi nghĩ nhiều người ngoài tôi sẽ được hưởng lợi từ lời giải thích rõ ràng về các đặc tính linh hoạt, đặc biệt là phát triển linh hoạt Tương tác với hệ thống phân cấp thành phần/thành phần và bạn thực sự đang làm gì khi đặt thuộc tính trên nút tổ tiên để giúp bố cục của bạn hoạt động bình thường.

Đây có thể là một vấn đề lớn hơn trong React Native, trong đó flex là phương pháp bố cục chính và bố cục có thể liên quan đến việc lồng sâu hơn so với thông thường trên web.

Trong trường hợp của tôi, một yếu tố liên quan đã làm tăng thêm sự nhầm lẫn là cách truyền bá thủ công qua tổ tiên. phát triển linh hoạt Cách này cũng giống như hướng uốn cong Làm việc cùng nhau, đặc biệt là trong React Native, thường được thực hiện trong hàng ngang Và cột Luân phiên giữa.

câu trả lời hay nhất

...để cài đặt “flex:1” hoặc “flex-grow:1” trên tất cả các nút tổ tiên trong bố cục flex lồng nhau...

giải thích"trên tất cả các nút tổ tiên"là không chính xác, nó phải làtrên tất cả các nút con cháu, đây là trongcha/con trai, nghĩa,phát triển linh hoạt 是在 đứa trẻ đặt trên cha mẹ, nhưng vì một phần tử có thể là cả hai cha mẹ và một đứa trẻ, thường được gọi là flex lồng nhau phần tử, một cha mẹ có thể có phát triển linh hoạt nếu nó cũng là một đứa trẻ .

bối cảnh định dạng flex Có một câu trả lời được giải thích rõ ràng ở đây:

...bạn thực sự đang làm gì khi đặt thuộc tính trên các nút tổ tiên để bố cục của bạn hoạt động.

Tương tự, nói"hiện hữuĐặt thuộc tính trên các nút tổ tiên”không chính xác đâu bạnĐặt thuộc tính trên các nút con cháuMạnh>

Giải thích về cài đặt “flex:1” hoặc “flex-grow:1” ... trong bố cục flex lồng nhau

Đầu tiên, thiết lậpuốn cong: 1等于linh hoạt: 1 1 0,phát triển linh hoạt: 1等于flex: 1 1 tự động, dựa trên uốn cong Mặc định là flex: 0 1 tự động, có một lời giải thích hay ở đây:

现在，phát triển linh hoạt Mặc định là 0, có nghĩa là nó sẽ không lớn hơn nội dung của nó, tương tự như khối nội tuyến code> phần tử và sẽ được hiển thị như thế này:

phần thân {lề: 0;

.flex-container {
  hiển thị: linh hoạt;
  chiều cao: 100vh; 
}

.flex-parent {
  hiển thị: linh hoạt;
}
.row-hướng {
  hướng linh hoạt: hàng;
}
.column-hướng {
  hướng flex: cột;
}

.flex-con {
  lề: 2px;
  đường viền: màu xám nét đứt 1px;
}


  


    

      Hàng đầu tiên, mục đầu tiên
    

    

      Hàng đầu tiên, mục thứ hai
    

    

      Hàng đầu tiên, mục thứ ba
    

    
  


  


    

      Hàng thứ hai, mục đầu tiên
    

    

      Hàng thứ hai, mục thứ hai
    

    
  


  


    

      Hàng thứ ba, mục đầu tiên


Vì thế phát triển linh hoạt: 1 Tất cả những gì làm là làm cho phần tử phát triển và lấp đầy khoảng trống có sẵn trong phần tử gốc của nó, như thế này, và như bạn có thể thấy ở đây xen kẽ giữa các hàng và cột React thực hiện điều này thường xuyên và nó hoạt động hoàn hảo:

phần thân {lề: 0;

.flex-container {
  hiển thị: linh hoạt;
  chiều cao: 100vh; 
}

.flex-parent {
  hiển thị: linh hoạt;
}
.row-hướng {
  hướng linh hoạt: hàng;
}
.column-hướng {
  hướng flex: cột;
}

.flex-con {
  tăng trưởng linh hoạt: 1;
  lề: 2px;
  đường viền: màu xám nét đứt 1px;
}


  


    

      Hàng đầu tiên, mục đầu tiên
    

    

      Hàng đầu tiên, mục thứ hai
    

    

      Hàng đầu tiên, mục thứ ba
    

    
  


  


    

      Hàng thứ hai, mục đầu tiên
    

    

      Hàng thứ hai, mục thứ hai
    

    
  


  


    

      Hàng thứ ba, mục đầu tiên


Về css - Xem xét rằng thuộc tính flex không có thứ bậc, giải thích cho việc đặt "flex: 1" hoặc "flex-grow: 1" trên tất cả các nút tổ tiên trong bố cục flex lồng nhau là gì? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/46459506/

28 4 0
Bài viết khuyến nghị: jquery - Chèn spinner vào ô bảng lịch đầy đủ
Bài viết khuyến nghị: Chuyển dữ liệu cảm biến từ iPhone sang PC bằng ứng dụng Java
Bài viết khuyến nghị: java - Thực thi tập lệnh shell từ chương trình Java qua ssh đến máy chủ từ xa
Bài viết khuyến nghị: Uncaught ReferenceError: ChangeSecondNavUlColor() không được xác định - Chức năng Javascript không hoạt động
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress