三 div / 两列布局 - 可以使用 Flexbox 吗?
Posted
技术标签:
【中文标题】三 div / 两列布局 - 可以使用 Flexbox 吗?【英文标题】:Three div / two column layout - possible with Flexbox? 【发布时间】:2021-12-20 08:05:00 【问题描述】:我一直在尝试使用 flexbox 实现下面的布局。我最初有一个包含图像和导航的左侧边栏,以及一个主要内容区域。在移动设备上,侧边栏用于包裹在主要内容之下。
问题在于我需要图像在移动设备上保持在顶部,所以我一直在尝试将三个兄弟div
s 放在一个包装器div
中。
这甚至可以使用 flexbox 还是我需要使用 css 网格?
【问题讨论】:
可以使用 flexbox:是的,但更适合 CSS 网格 【参考方案1】:虽然 CSS Grid 是实现您想要的布局的最佳方法,但使用 CSS Flexbox 也是可能的。
您只需要创建一个包装器div
,其中包含三个div
s(在执行移动优先方法时)并将.content
设置为flex: 1
以拉伸高度您的视口。
然后对于桌面(在本例中为@media screen and (min-width: 1000px)
),更改.navigation
和.content
的顺序(MDN reference of order
)并根据需要为所有三个div
s 提供适当的宽度。对div.wrapper
的唯一更改是它需要flex-flow: column wrap
才能正确换行。
.wrapper
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
.box
display: flex;
.content
flex: 1;
@media screen and (min-width: 1000px)
.wrapper
flex-flow: column wrap;
.navigation
order: 2;
.content
order: 3;
.image,
.navigation
width: 200px;
flex: 50%;
.content
width: calc(100% - 200px);
flex: 0 0 100%;
/* Generic styling */
html,
body
height: 100%;
body
margin: 0;
padding: 0;
.image
background: orange;
height: 60px;
.content
background: lightblue;
.navigation
background: lightgreen;
height: 60px;
<div class="wrapper">
<div class="box image">Image</div>
<div class="box content">Content</div>
<div class="box navigation">Navigation</div>
</div>
【讨论】:
天才,我试试看。 @ChrisJAllen 你成功了吗? 是的,确实如此。非常感谢。我现在可以替换重复图像的显示和隐藏,并使其适应工作。以上是关于三 div / 两列布局 - 可以使用 Flexbox 吗?的主要内容,如果未能解决你的问题,请参考以下文章
这张图用div+css写这个两列布局左侧一列3行怎么写,算上图标
DIV+CSS布局,怎么实现两列高度会一致,其中左例随内容长度而定。