CSS左浮动样式行为，仅使用Flex布局并更改顺序

gt0wga4j 于 2023-02-14 发布在其他

关注(0)|答案(1)|浏览(117)

我尝试在CSS flex中实现列和行布局，但仅限于部分。我知道还有其他可能的方法，但我正在尝试学习CSS flex布局，并发现其局限性。我在html中有许多部分，如下所示：

<div id="main">
<section id="section1">Section1</section>
<section id="section2">Section2</section>
<section id="section3">Section3</section>
<section id="section4">
<h1>Section4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim tortor dictum quam consequat hendrerit. Aliquam nisl nisi, faucibus sed elit a, mollis scelerisque dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sodales semper augue, quis sagittis lacus dapibus ut. Vestibulum fringilla ut leo quis consequat. Suspendisse potenti. Sed vel purus velit. Phasellus condimentum non turpis id consectetur. Vivamus non leo id elit sodales tincidunt. Mauris pretium massa ac lacus varius convallis. Morbi sit amet justo sed mi ultricies iaculis. Ut malesuada justo quis magna fermentum ullamcorper. Vivamus quis leo turpis. Aenean at mauris ac ex tincidunt aliquet. Sed iaculis vestibulum pretium.
</p><p>
Sed quis pharetra tellus. Integer nec ante sodales massa dictum consectetur et nec eros. Fusce et nisi orci. Vivamus ornare eget eros et posuere. Phasellus et semper nunc, sed cursus purus. Maecenas vulputate sem eros, a porta velit accumsan eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean commodo blandit efficitur. Maecenas imperdiet in erat eu pretium. Proin dapibus massa ac dui maximus imperdiet. Sed eget maximus leo.
</p>
</section>
</div>

在JS小提琴中：https://jsfiddle.net/t5zmv1wj/5/
我想在不改变html结构或章节顺序的情况下改变这些章节的布局。我只想用css来布局flex框，让一个框作为一列放在旁边，然后让其他框在它的下面。这就是我想达到的目标：

我已经接近了，但是只有section1在section 4旁边，而section 2和3在section 4下面，而不是像

这样在section 4旁边和section 1下面下面这里有两个js fiddle中的例子，这是我试图实现的，但是这两个例子都需要改变html结构才能工作，我不想这样做：

css

来源：https://stackoverflow.com/questions/75418753/css-float-left-style-behavior-with-only-flex-layout-and-changing-the-order

1条答案

按热度按时间

tzdcorbm1#

@Temani Afif带着正确的建议而来：使用css网格。这正是我需要的答案。这是一个js小提琴展示如何轻松实现它。https://jsfiddle.net/2zm3oa86/2/。与下面的html，下面的css风格的东西很好：

body, html, #top {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#top {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #4444FF;
}
#top > aside {
  flex: 0 0 20%;
}
#main {
  display: grid;
  grid-gap: 20px;
  grid-template: auto auto auto auto / 20% calc(80% - 20px);
  overflow: auto;
  background-color: #99AACC;
  
}
#main > section{
  padding: 10px;
  border: 1px solid red; 
}
#main > section#section4 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 4;
}

它仍然使用了一个Flexbox作为侧边，我喜欢将它与网格布局分开，并且工作起来很容易。网格设置了一个模板，有4行，每行都有自动高度，还有2列，20%和80%#section4被具体地放置在第1行/第1列中，并跨越4行。然后，其他部分将在其余行中自动调整间距。通过使用4行（而不是3行），第1-3部分仅占用其内容所需的空间，其余空间将分配给（空）行4）。

<html>
<head>

</head>
<body>
<div id="top">
<aside>
  Aside
</aside>
<div id="main">
<section id="section1">Section1</section>
<section id="section2">Section2</section>
<section id="section3">Section3</section>
<section id="section4">
<h1>Section4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim tortor dictum quam consequat hendrerit. Aliquam nisl nisi, faucibus sed elit a, mollis scelerisque dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sodales semper augue, quis sagittis lacus dapibus ut. Vestibulum fringilla ut leo quis consequat. Suspendisse potenti. Sed vel purus velit. Phasellus condimentum non turpis id consectetur. Vivamus non leo id elit sodales tincidunt. Mauris pretium massa ac lacus varius convallis. Morbi sit amet justo sed mi ultricies iaculis. Ut malesuada justo quis magna fermentum ullamcorper. Vivamus quis leo turpis. Aenean at mauris ac ex tincidunt aliquet. Sed iaculis vestibulum pretium.
</p><p>
Sed quis pharetra tellus. Integer nec ante sodales massa dictum consectetur et nec eros. Fusce et nisi orci. Vivamus ornare eget eros et posuere. Phasellus et semper nunc, sed cursus purus. Maecenas vulputate sem eros, a porta velit accumsan eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean commodo blandit efficitur. Maecenas imperdiet in erat eu pretium. Proin dapibus massa ac dui maximus imperdiet. Sed eget maximus leo.
</p>
</section>
</div>
</div>
</body>
</html>

赞(0）回复(0）举报 2023-02-14

我来回答

CSS左浮动样式行为，仅使用Flex布局并更改顺序

1条答案

相关问题

热门标签

最新问答