Tôi muốn định vị văn bản (liên kết foo) ở bên phải phần tử chân trang.float không hoạt động trong thùng chứa flex
Tôi cần hiển thị chân trang để giữ nguyên flex.
Nhưng khi tôi đặt thành flex, float:right cho khoảng không hoạt động nữa.
<footer style="display: flex;">
<span style="text-align: right;float: right;">
<a>foo link</a>
</span>
</footer>https://jsfiddle.net/dhsgvxdx/
Thuộc tính float được bỏ qua trong một container flex.
Từ đặc điểm kỹ thuật flexbox:
3. Flex Containers: the
flexandinline-flexdisplay valuesMột container flex thiết lập một mới bối cảnh định dạng flex cho nội dung của nó. Điều này cũng giống như việc thiết lập bối cảnh định dạng khối, ngoại trừ bố cục flex được sử dụng thay cho bố cục khối.
Ví dụ, phao không xâm nhập vào thùng chứa flex và lề của thùng chứaflex không bị sập với lề của nội dung .
floatvàclearkhông tạo nổi hoặc giải phóng mặt bằng của mặt hàng flex và không mang nó ra ngoài luồng.
Thay vào đó, chỉ cần sử dụng tính flex:
footer {
display: flex;
justify-content: flex-end;
}<footer>
<span>
<a>foo link</a>
</span>
</footer>Nếu bạn có thêm mục vào chân trang, và cần các tùy chọn liên kết khác, thì đây là hai hướng dẫn:
liên kết này http://stackoverflow.com/a/33856609/3597276 thật tuyệt vời. – somename
Nó hoạt động nếu bạn thêm margin-left: auto; như tôi đã làm ở đây jsfiddle: https://jsfiddle.net/dhsgvxdx/3/
<body>
<footer style="display: flex;">
<span style="text-align: right;float: right; margin-left: auto;">
<a>foo link</a>
</span>
</footer>
</body>
có hoạt động. tnx – somename
Tôi biết trả lời trễ nhưng nó sẽ giúp người khác ..Nếu bạn sử dụng 'margin-left: auto' thì không cần sử dụng thuộc tính' float: right' ....! Trong trường hợp của tôi nó làm việc mà không có nó .. –
Nếu chân này chỉ chứa một tên bên phải là mục liên kết, bạn có thể chỉ cần áp dụng justify-content: flex-end cho hộp chứa flex. Bằng cách này, bạn không phải thêm bất kỳ kiểu nào cho con của nó.
footer {
display: flex;
justify-content: flex-end;
}
có. tôi thử nó. nó hoạt động trong một số trường hợp. nhưng trong trường hợp của tôi, tôi có một số yếu tố cần phải ở bên trái của chân trang. và một số ở bên phải. – somename
Trong trường hợp đó, sử dụng 'justify-content: space-between' trên vùng chứa - không cần float hoặc text-align. – alanbuchanan
hmmm. tôi kiểm tra nó. thật tuyệt. bằng cách này, các yếu tố được tự động căn chỉnh. tnx – somename
Xem [Quy tắc css nào bị bỏ qua khi flexbox đang hoạt động?] (Http://stackoverflow.com/q/30500734/1529630) – Oriol