Trình tạo Flexbox
Thiết lập khung chứa flex và các phần tử con bằng các điều khiển trực quan, quan sát bố cục phản hồi trực tiếp và sao chép mã CSS chỉ với một cú nhấp chuột.
Bố cục của bạn được xây dựng trực tiếp trong trình duyệt. Không có dữ liệu nào bạn thiết lập được tải lên BroBroGo.
Hỏi đáp
Sự khác biệt giữa justify-content và align-items là gì?
Justify-content phân bổ khoảng cách các phần tử dọc theo trục chính (main axis) — hướng mà hàng hoặc cột chảy — trong khi align-items định vị chúng dọc theo trục phụ (cross axis). Khi bạn chuyển hướng từ hàng (row) sang cột (column), hai trục này sẽ hoán đổi cho nhau, do đó justify-content bắt đầu hoạt động từ trên xuống dưới và align-items hoạt động từ trái sang phải.
Các điều khiển cho từng phần tử hoạt động như thế nào?
Chọn một phần tử theo số thứ tự của nó, sau đó thiết lập mức độ giãn ra (grow) để lấp đầy không gian trống, mức độ co lại (shrink) khi không gian bị thu hẹp, kích thước ban đầu (basis) và căn chỉnh trục phụ của riêng nó (align-self). Thuộc tính order giúp di chuyển phần tử lên trước hoặc ra sau trên màn hình mà không cần chạm vào mã HTML. Chỉ những phần tử bạn thực sự thay đổi mới nhận quy tắc riêng trong mã CSS.
Khi nào thuộc tính wrap và align-content mới thực sự quan trọng?
Khi tắt chế độ xuống dòng (wrap), mọi phần tử bị buộc phải nằm trên một dòng duy nhất và có thể bị bóp hẹp lại. Khi bật lên, các phần tử không còn đủ chỗ sẽ tự động rơi xuống dòng tiếp theo — đó là lúc align-content phát huy tác dụng, phân bổ khoảng cách cho các dòng dưới dạng một nhóm. Gap thiết lập khoảng cách giữa các phần tử và giữa các dòng mà không cần dùng margin.