Các vấn đề về bố cục ứng dụng CSS Flexbox

Question

Tôi có hai codepens riêng biệt mà tôi đã làm việc, một với bố cục chính của trang web, hoạt động tốt và thứ hai là thành phần mà tôi muốn thêm bên trong thanh bên trái của chính bố trí.

Thành phần hoạt động hoàn hảo khi bên trong một vùng chứa có chiều cao được đặt, nó sẽ co lại và kéo dài theo cách tôi muốn nếu bên trong loại div cha này.

Khi tôi thêm thành phần vào bố cục chính tuy nhiên nó mở rộng thanh bên trái, phá vỡ bố cục hoàn hảo, tôi muốn bố cục chính là kích thước của cửa sổ trình duyệt hiện tại và trang không bao giờ cuộn. có cách nào để nói cho các sidebars này ".layout-left" ".layout-stage" và ".layout-right" để không mở rộng?

đây là những codepens tôi đã nói chuyện về:

chính diện làm việc: http://codepen.io/AlexBezuska/pen/KwOagy

sidebar làm việc: http://codepen.io/AlexBezuska/pen/ZYgWYp

kết hợp (không hoạt động): http://codepen.io/AlexBezuska/pen/LEwGJj

Layout CSS tôi đang sử dụng:

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    width: 100%; 
    margin: 0 auto; 
} 

.layout-middle{ 
    display: flex; 
    flex: 1; 
} 

.layout-stage{ 
    flex: 1 0 320px; 
    background: #ffc94e; 
} 

.layout-left, .layout-right{ 
    flex: 0 0 320px; 
    background: #c9ea5d; 
} 

.layout-left{ 
    background: #85d6e4; 
} 

.layout-header{ 
    height: 100px; 
    background: #92e4c9; 
} 

.layout-footer{ 
    height: 150px; 
    background: #f7846a; 
} 

Answer 1

Tôi muốn bố cục chính là kích thước của cửa sổ trình duyệt hiện tại và trang không bao giờ cuộn.

Trong trường hợp này, bạn cũng cần phải đặt max-height cho các thành phần, ít nhất là cho layout-middle.

Answer 2

.layout-left needs display: flex; và flex-flow: column; Tôi cũng đã thêm một trình bao bọc .container với display: flex; flex-direction: column; height: 100vh; và xóa hầu hết các thuộc tính khỏi cơ thể. bút chia hai: http://codepen.io/oosby/pen/GJJqvP

Answer 3

Bạn hiện có .layout-header, .layout-middle và .layout-footer thiết lập để lấp đầy khoảng trống dọc có sẵn, vấn đề là độ dài của nội dung trong .layout-left. Có một số cách để bạn có thể dừng nội dung của .layout-left tràn ra khỏi vùng chứa.

phương pháp Overflow

Bằng cách thêm .overflow-y: auto;-.layout-left bạn có thể đảm bảo rằng một thanh cuộn được hiển thị nếu nội dung của nó dài hơn chiều cao của nó, ngăn chặn các nội dung từ tràn ra.

.panel { 
 
    display: flex; 
 
    flex-flow: column; 
 
    /*padding: 1em;*/ 
 
    overflow: hidden; 
 
    flex: 1;/*Add this*/ 
 
} 
 
header { 
 
    min-height: 32px;/*Add this*/ 
 
    height: 32px; /*must be 32px*/ 
 
    background: #c0c0c0; 
 
} 
 
footer { 
 
    background: #cfcfcf; 
 
    height: 32px;/*must be 32px*/ 
 
} 
 
.select-list { 
 
    /*flex: 1;*/ 
 
    overflow-y: scroll; 
 
    /*max-height:16vh; Remove this*/ 
 
} 
 
.select-list-item { 
 
    background: white; 
 
    border: 1px solid black; 
 
    height: 32px;/*must be 32px*/ 
 
} 
 

 
/*===============================================*/ 
 
body { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    max-height: 100vh; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.layout-middle { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.layout-stage { 
 
    flex: 1 0 320px; 
 
    background: #ffc94e; 
 
} 
 
.layout-left, 
 
.layout-right { 
 
    flex: 0 0 320px; 
 
    background: #c9ea5d; 
 
} 
 
.layout-left { 
 
    background: #85d6e4; 
 
    overflow-y: auto;/*Add this*/ 
 
} 
 
.layout-header { 
 
    height: 100px;/*must be 100px*/ 
 
    background: #92e4c9; 
 
} 
 
.layout-footer { 
 
    height: 150px;/*must be 150px*/ 
 
    background: #f7846a; 
 
}

<div class="layout-header"> 
 
    <h1></h1> 
 
</div> 
 
<div class="layout-middle"> 
 
    <div class="layout-left"> 
 
    <!-- start content --> 
 
    <div class="panel"> 
 
     <header>panel header</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <div class="panel"> 
 
     <header>Entities</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <div class="panel"> 
 
     <header>Entities</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <!-- end content --> 
 
    </div> 
 
    <main class="layout-stage"> 
 
    <h2>stage</h2> 
 
    </main> 
 
    <aside class="layout-right"> 
 
    <h2>right</h2> 
 

 
    </aside> 
 
</div> 
 
<div class="layout-footer"> 
 
    <h2>Footer</h2> 
 
</div>

http://codepen.io/anon/pen/gppPrp

phương pháp Flex

Bằng cách thêm display: flex; và flex-direction: column;-.layout-left bạn có thể nhận được nội dung của nó để phù hợp với không gian có sẵn.

.panel { 
 
    display: flex; 
 
    flex-flow: column; 
 
    /*padding: 1em;*/ 
 
    overflow: hidden; 
 
    flex: 1;/*Add this*/ 
 
} 
 
header { 
 
    min-height: 32px;/*Add this*/ 
 
    height: 32px;/*must be 32px*/ 
 
    background: #c0c0c0; 
 
} 
 
footer { 
 
    background: #cfcfcf; 
 
    height: 32px;/*must be 32px*/ 
 
} 
 
.select-list { 
 
    /*flex: 1;*/ 
 
    overflow-y: scroll; 
 
    /*max-height:16vh; Remove this*/ 
 
} 
 
.select-list-item { 
 
    background: white; 
 
    border: 1px solid black; 
 
    height: 32px;/*must be 32px*/ 
 
} 
 

 
/*===============================================*/ 
 

 
body { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    max-height: 100vh; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.layout-middle { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.layout-stage { 
 
    flex: 1 0 320px; 
 
    background: #ffc94e; 
 
} 
 
.layout-left, 
 
.layout-right { 
 
    flex: 0 0 320px; 
 
    background: #c9ea5d; 
 
} 
 
.layout-left { 
 
    background: #85d6e4; 
 
    display: flex;/*Add this*/ 
 
    flex-direction: column;/*Add this*/ 
 
} 
 
.layout-header { 
 
    height: 100px;/*must be 100px*/ 
 
    background: #92e4c9; 
 
} 
 
.layout-footer { 
 
    height: 150px;/*must be 150px*/ 
 
    background: #f7846a; 
 
}

<div class="layout-header"> 
 
    <h1></h1> 
 
</div> 
 
<div class="layout-middle"> 
 
    <div class="layout-left"> 
 
    <!-- start content --> 
 
    <div class="panel"> 
 
     <header>panel header</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <div class="panel"> 
 
     <header>Entities</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <div class="panel"> 
 
     <header>Entities</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <!-- end content --> 
 
    </div> 
 
    <main class="layout-stage"> 
 
    <h2>stage</h2> 
 
    </main> 
 
    <aside class="layout-right"> 
 
    <h2>right</h2> 
 

 
    </aside> 
 
</div> 
 
<div class="layout-footer"> 
 
    <h2>Footer</h2> 
 
</div>

http://codepen.io/anon/pen/qddEoz

Answer 4

Fixed CodePen (cũng hoạt động trên Firefox)

tôi đã thực hiện 3 sự thay đổi:

1) tôi đã thiết lập các hei ght của cơ thể với mong muốn một:

body { 
    height: 100vh; 
} 

2) Tôi đã trao cho các thùng chứa bên trái mô hình đấm bốc phải:

.layout-left, .layout-right{ 
    display: flex; 
    flex-direction: column; 
} 

3) Để cho các tấm để không tràn trên Firefox, tôi đã thêm điều này:

div { 
    min-height: 0; 
} 

Cài đặt cuối cùng này được giải thích trong this question bởi một nhà phát triển làm việc trên mô hình flex tại Mozilla. Tất nhiên bạn nên thiết lập nó chỉ trên div cha mẹ có liên quan nhưng điều này đơn giản hơn.