使用 flexbox 设置布局
Setting layout with flexbox
我在下面有一个线框图,想看看使用 flexbox
进行编码的最佳方式是什么。
我已经编写了 simple flexbox grid system 但我的线框需要比我在网格系统上更多的定制。
我有 parent div 有 display: flex
并且有 2 child div 有 flex:1
和 flex: 0 0 40%
。
添加内容 div(蓝色和红色灰色框内)的最佳方式是什么,该内容将与主包装器的其余部分保持一致(整个灰色框设置为 max-width: 1400px
)?
谢谢。
大致思路如下。
定位伪元素,行的每一部分一个。具有合适的宽度(注意 body
应该有 overflow-x:hidden
)和适当的定位值。
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
.wrapper {
min-height: 100vh; /* for demo purposes */
width: 60%;
margin: auto;
background: grey;
display: flex;
flex-direction: column;
}
header {
height: 20vh;
background: green;
}
.inner {
height: 30vh;
display: flex;
}
main {
background: blue;
flex: 1;
border: 2px solid black;
}
aside {
background: red;
flex: 0 0 40%;
border: 2px solid black;
}
.other {
background: pink;
flex: 1;
}
/* magic section */
.extend {
position: relative;
}
.extend::after {
content: '';
position: absolute;
width: 100vw;
top: 0;
height: 100%;
background: inherit;
z-index: -1;
}
.left::after {
right: 0;
}
.right::after {
left: 0;
}
<div class="wrapper">
<header></header>
<div class="inner">
<main class="extend left"></main>
<aside class="extend right"></aside>
</div>
<div class="other"></div>
</div>
我在下面有一个线框图,想看看使用 flexbox
进行编码的最佳方式是什么。
我已经编写了 simple flexbox grid system 但我的线框需要比我在网格系统上更多的定制。
我有 parent div 有 display: flex
并且有 2 child div 有 flex:1
和 flex: 0 0 40%
。
添加内容 div(蓝色和红色灰色框内)的最佳方式是什么,该内容将与主包装器的其余部分保持一致(整个灰色框设置为 max-width: 1400px
)?
谢谢。
大致思路如下。
定位伪元素,行的每一部分一个。具有合适的宽度(注意 body
应该有 overflow-x:hidden
)和适当的定位值。
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
.wrapper {
min-height: 100vh; /* for demo purposes */
width: 60%;
margin: auto;
background: grey;
display: flex;
flex-direction: column;
}
header {
height: 20vh;
background: green;
}
.inner {
height: 30vh;
display: flex;
}
main {
background: blue;
flex: 1;
border: 2px solid black;
}
aside {
background: red;
flex: 0 0 40%;
border: 2px solid black;
}
.other {
background: pink;
flex: 1;
}
/* magic section */
.extend {
position: relative;
}
.extend::after {
content: '';
position: absolute;
width: 100vw;
top: 0;
height: 100%;
background: inherit;
z-index: -1;
}
.left::after {
right: 0;
}
.right::after {
left: 0;
}
<div class="wrapper">
<header></header>
<div class="inner">
<main class="extend left"></main>
<aside class="extend right"></aside>
</div>
<div class="other"></div>
</div>