Câu hỏi được gắn thẻ «flexbox»

Tôi đang lên kế hoạch để tránh xa các bố cục "floaty" và sử dụng CSS flexbox cho các dự án trong tương lai. Tôi rất vui khi thấy tất cả các trình duyệt chính trong các phiên bản hiện tại của chúng dường như hỗ trợ flexbox (bằng cách …

117 html  css  flexbox  cross-browser 

Tôi có một trang web đơn giản với một số nội dung Lipsum được căn giữa trang. Trang hoạt động tốt trong Chrome và Firefox. Nếu tôi giảm kích thước của cửa sổ, nội dung sẽ lấp đầy cửa sổ cho đến khi không thể, sau đó thêm thanh cuộn …

116 internet-explorer  css  flexbox  internet-explorer-11 

Bằng cách sử dụng mô hình hộp linh hoạt CSS, làm cách nào để buộc hình ảnh duy trì tỷ lệ khung hình? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Lưu ý rằng hình ảnh kéo dài hoặc thu nhỏ để lấp đầy chiều rộng của vùng chứa. Điều đó tốt, nhưng chúng ta …

114 html  css  flexbox 

Tôi đã bị mắc kẹt về điều này một chút và nghĩ rằng tôi sẽ chia sẻ cái này position: sticky+ flexbox gotcha: Chiếc div dính của tôi hoạt động tốt cho đến khi tôi chuyển chế độ xem của mình sang một hộp đựng flex box, và đột nhiên …

106 css  flexbox  css-position  sticky 

tôi có một <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> Cha mẹ có .parent { display: flex; } Đối với đứa con đầu tiên của tôi, tôi muốn chỉ đơn giản là thả nổi món đồ đó sang bên phải. Và các div khác …

104 html  css  flexbox 

Làm cách nào để biết một hàng bố cục flexbox sử dụng không gian dọc còn lại trong cửa sổ trình duyệt? Tôi có bố cục flexbox 3 hàng. Hai hàng đầu tiên có chiều cao cố định, nhưng hàng thứ 3 là động và tôi muốn nó phát triển …

102 html  css  flexbox 

Tôi muốn sử dụng một ứng dụng có chiều cao đầy đủ bằng flexbox. Tôi đã tìm thấy thứ mình muốn bằng cách sử dụng mô-đun bố cục flexbox cũ ( display: box;và những thứ khác) trong liên kết này: Ứng dụng CSS3 Flexbox full-height và tràn Đây là một …

101 html  css  flexbox 

Tôi hiểu rằng điều này là không thể đạt được bằng cách sử dụng Flexbox, vì mỗi hàng chỉ có thể là chiều cao tối thiểu cần thiết để phù hợp với các phần tử của nó, nhưng liệu điều này có thể đạt được bằng cách sử dụng CSS …

101 css  flexbox  grid-layout  css-grid 

Tôi đã sử dụng bố cục hộp flex CSS xuất hiện như hình dưới đây: Nếu màn hình nhỏ hơn, nó sẽ biến thành như sau: Vấn đề là hình ảnh không được thay đổi kích thước để giữ tỷ lệ khung hình từ hình ảnh gốc. Có thể sử …

98 html  css  flexbox 

Câu hỏi này liên quan đến một trình duyệt có hỗ trợ css3 đầy đủ bao gồm cả flexbox. Tôi có một hộp đựng linh hoạt với một số mặt hàng trong đó. Tất cả chúng đều hợp lý để flex-start nhưng tôi muốn mục cuối cùng .end hợp lý …

97 css  flexbox 

Tôi cần trợ giúp để khắc phục sự cố, tôi cần căn giữa nội dung bên trong cột trong bootstrap4, vui lòng tìm mã của tôi bên dưới <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div> </div> </div>

95 twitter-bootstrap  flexbox  bootstrap-4 

Mẫu vật: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Chạy đoạn mãẨn kết quảMở rộng đoạn mã Tôi có hai câu hỏi, vui lòng: Tại sao nó về cơ bản xảy ra với span? Cách tiếp cận …

94 html  css  flexbox 

Tôi muốn tạo một divthanh ở đầu màn hình mà không ảnh hưởng đến các phần tử khác và phần tử con của nó ở trung tâm. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> Chạy đoạn mãẨn kết quảMở rộng đoạn mã Khi …

93 css  react-native  flexbox 

Có vẻ như với position:absoluteviệc sử dụng một phần tử không thể được căn giữa bằng cách sử dụng justifyContenthoặc alignItems. Có một giải pháp để sử dụng marginLeftnhưng không hiển thị giống nhau cho tất cả các thiết bị, ngay cả khi sử dụng kích thước để phát hiện …

92 position  react-native  flexbox  absolute 

Tôi đang cố gắng căn giữa các yếu tố bên trong của thẻ <button>-tag bằng flexbox justify-content: center. Nhưng Safari không tập trung vào chúng. Tôi có thể áp dụng cùng một kiểu cho bất kỳ thẻ nào khác và nó hoạt động như dự định (xem <p>-tag). Chỉ có …

91 html  css  safari  flexbox  css-grid