Cột Flexbox có chiều rộng bằng nhau - CSS Generator
Xây dựng bố cục CSS flexbox một cách trực quan: flex-direction, right-content, căn chỉnh các mục, flex-wrap và khoảng cách trên vùng chứa, cùng với flex-grow, flex-shrink và flex-basis cho mỗi đứa trẻ, tất cả đều có bản xem trước trực tiếp và CSS có thể sao chép.
kết quả
Trang này mở trình tạo với flex-grow: 1 đã được đặt trên cả ba hộp xem trước. Xem chúng: thay vì thu nhỏ để vừa với nội dung của chúng, mỗi hộp yêu cầu một phần không gian còn lại giống hệt nhau trong hàng, đó là toàn bộ công thức cho các cột linh hoạt có chiều rộng bằng nhau - không có chiều rộng phần trăm, không có calc(), không có phép toán pixel cố định để giữ đồng bộ hóa.
flex-grow: 1 yêu cầu một đứa trẻ lớn lên và đặt nó trên mỗi đứa trẻ trong hàng có nghĩa là tất cả chúng đều tăng trưởng như nhau, vì vậy chúng có cùng chiều rộng bất kể có bao nhiêu hoặc nội dung gì bên trong chúng. Thêm hoặc xóa hộp có các điều khiển bên dưới và các cột còn lại sẽ phân phối lại ngay lập tức để giữ nguyên - thay đổi kích thước cửa sổ trình duyệt theo bố cục này trong quá trình sản xuất và nó hoạt động theo cách tương tự.
Đây là mẫu đằng sau các lưới thẻ có chiều cao bằng nhau, các cột trong bảng giá và các phần chân trang được chia đều. Cung cấp thêm không gian cho một cột bằng cách nâng mức tăng trưởng linh hoạt của nó lên trên các cột khác hoặc sao chép khối CSS bên dưới chính xác như đã tạo để có sự phân chia bằng nhau rõ ràng.