如何使用弹性框将网页分成四个相等的部分?像这个网站的东西 –
www.rileyjshaw.com
列应该能够在较小的视图端口上相互堆叠.
编辑/更新:
到目前为止,我已经尝试过这个 –
我应该改变线高吗?如何实现不同的块?
/* Grid */ .column { flex-basis: 100%; width: 50%; height: 50%; line-height: 200px; } @media screen and (min-width: 800px) { .row { display: flex; flex-direction: row; flex-wrap: Nowrap; } .column { flex: 1; } ._25 { flex: 2.5; } ._5 { flex: 5; } } /* Style */ body { font-family: 'Lato',sans-serif; font-size: 1.3em; color: #ccc; background: #000; /*margin-bottom: 70px;*/ } .column { /* padding: 15px; border: 1px solid #666; margin: 5px 0;*/ background: #343436; } main { max-width: 1200px; margin: 0 auto; } h1,h2 { text-align: center; }
<div class="row"> <div class="column"> 50% </div> <div class="column"> 50% </div> </div> <div class="row"> <div class="column"> 50% </div> <div class="column"> 50% </div> </div>
解决方法
您可以简化代码并获得所需的输出.在这里,我删除了行并使用了一个容器.这种结构的主要好处是,如果您认为有必要,可以改变列的顺序.
我也选择使用flex-basis而不是flex-grow来使它们保持50%的宽度,无论其内容大小如何.
在更宽的屏幕上,使用媒体查询,将列设置为50%宽,并将容器设置为:flex; flex-wrap:wrap;.
在较窄的屏幕上,以及作为块元素,它们默认堆叠在一起
html,body { height: 100%; margin: 0; } .container { height: 100%; } .column { height: 25%; } @media screen and (min-width: 600px) { .container { display: flex; flex-wrap: wrap; } .column { flex-basis: 50%; height: 50%; } } /* general styles */ body { font-family: 'Lato',sans-serif; font-size: 1.3em; color: #ccc; background: #000; /*margin-bottom: 70px;*/ } .column { padding: 15px; /*border: 1px solid #666;*/ Box-sizing: border-Box; } .column:nth-child(1) { background: #5c9; } .column:nth-child(2) { background: #fb0; } .column:nth-child(3) { background: #39f; } .column:nth-child(4) { background: #f33; } main { max-width: 1200px; margin: 0 auto; } h1,h2 { text-align: center; }
<div class="container"> <div class="column"> 50% </div> <div class="column"> 50% </div> <div class="column"> 50% </div> <div class="column"> 50% </div> </div>
html,body { height: 100%; margin: 0; } .row { height: 50%; } .column { height: 50%; } @media screen and (min-width: 600px) { .row { display: flex; } .column { flex-basis: 50%; height: 100%; } } /* general styles */ body { font-family: 'Lato',sans-serif; font-size: 1.3em; color: #ccc; background: #000; /*margin-bottom: 70px;*/ } .column { padding: 15px; /*border: 1px solid #666;*/ Box-sizing: border-Box; } .row:nth-child(1) .column:nth-child(1) { background: #5c9; } .row:nth-child(1) .column:nth-child(2) { background: #fb0; } .row:nth-child(2) .column:nth-child(1) { background: #39f; } .row:nth-child(2) .column:nth-child(2) { background: #f33; } main { max-width: 1200px; margin: 0 auto; } h1,h2 { text-align: center; }
<div class="row"> <div class="column"> 50% </div> <div class="column"> 50% </div> </div> <div class="row"> <div class="column"> 50% </div> <div class="column"> 50% </div> </div>
根据评论更新
使列的内容居中可以完成:
> FlexBox – https://jsfiddle.net/0ns6ofcp/
.column { height: 25%; display: flex; /* added */ justify-content: center; /* hor. center */ align-items: center; /* ver. center */ }
>转型 – https://jsfiddle.net/0ns6ofcp/1/
<div class="column"> <div>50%</div> </div> .column { position: relative; /* added property */ height: 25%; } .column > div { /* added rule */ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。