CSS Flex Box --- flex-wrap: bọc; Làm thế nào để tạo kiểu cho một dòng cụ thể?

Câu hỏi của tôi liên quan đến tạo kiểu Flex-Boxes bọc (flex-wrap: wrap;) thành nhiều dòng tùy thuộc vào chiều rộng của cửa sổ Trình duyệt: Có cách nào khác ngoài JavaScript để thiết kế một dòng cụ thể không?CSS Flex Box --- flex-wrap: bọc; Làm thế nào để tạo kiểu cho một dòng cụ thể?

Chúng tôi có divs sau

<body> 
<div class="flexwrap"> 
    <div class=flexbox"></div> 
    <div class=flexbox"></div> 
    <div class=flexbox"></div> 
</div> 
</body>

Và stylesheet sau

.flexwrap { 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    display: -moz-box; 
    -moz-box-orient: horizontal; 
    display: flex; 
    box-orient: horizontal; 
    display: -ms-flexbox; 
    -ms-flex-direction: row; 
    flex-wrap: wrap; 
} 

.flexbox { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
    flex-grow:1; 
    flex-shrink:0; 
    width:300px; 
    height:100px; 
}

Khi chiều rộng của cửa sổ trình duyệt là hơn 900px, tất cả các div với .flexbox lớp sẽ được trong một đường ngang đơn cạnh nhau. Khi chiều rộng của cửa sổ trình duyệt nhỏ hơn 900px số div với lớp .flexbox sẽ chuyển thành 2 hoặc 3 dòng, giảm dần trên chiều rộng của trình duyệt.

Tôi muốn tạo kiểu cho tất cả các div nằm trong dòng thứ hai. Điều đó có nghĩa là:

Browser width > 900px = no div is styled 
Browser width < 900px and Browser width > 600px = the third div is styed 
Browser width < 600px = the second div is styled

Có cách nào để đạt được điều đó bằng cách sử dụng css không?

Cảm ơn trước

Nguồn

2013-10-29 philkunz

Bạn có nghĩa là áp dụng kiểu cho phần tử với 'flex-wrap: wrap' được áp dụng hoặc nhận phần tử hoạt động theo cách tương tự mà không cần sử dụng JavaScript? Nó thường hiệu quả hơn để nhận trợ giúp bằng cách cung cấp một số mã mẫu hoặc hình ảnh hiển thị những gì bạn đang cố gắng đạt được. –

đây là một câu hỏi tương tự: http://stackoverflow.com/questions/19574851/how-to-specify-an-element-after-which-to-wrap-in-css-flex/19576595#19576595 – jbenjohnson

Related: http: //stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid – cimmanon

No. Flexbox không cung cấp cách tạo kiểu cho các dòng cụ thể trong hộp chứa nhiều đường.

Flexbox không cho phép các mục flex thay đổi kích thước dựa trên giá trị cơ sở flex của chúng.

http://codepen.io/cimmanon/pen/GKEfD

.flexwrap { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
@supports (flex-wrap: wrap) { 
    .flexwrap { 
    display: flex; 
    } 
} 

.flexbox { 
    -webkit-flex: 1 20em; 
    -ms-flex: 1 20em; 
    flex: 1 20em; 
    height: 100px; 
}

Lưu ý rằng điều này sẽ không làm việc với thực hiện năm 2009 Flexbox:

Trong khi gói được chỉ định, không có trình duyệt thực hiện nó
Không có flex-cơ sở

Liên quan: CSS3 flexbox adjust height of vertically aligned elements

Nguồn

2013-10-29 19:00:58 cimmanon

Vì vậy, bạn sẽ sử dụng JavaScript và jquery? – philkunz

CSS Flex Box --- flex-wrap: bọc; Làm thế nào để tạo kiểu cho một dòng cụ thể?

Trả lời

Các vấn đề liên quan