如何使用全屏高度的Flexbox以20:50:30的比例垂直划分三个<div>？

问题描述投票：0回答：2

我想使用 Flex 制作一个移动优先响应式布局，其中三个部分以 20:50:30 的比例垂直划分，并具有屏幕的全高。

这是 HTML 部分：

<body>
  <main>
    <div class="parent">
      <div class="topSection">
        This is Top Section
      </div>
      <div class="middleSection">
        This is Middle Section
      </div>
      <div class="bottomSection">
        This is Bottom Section
      </div>
    </div>
  </main>
</body>

预期布局：

html css flexbox responsive-design tailwind-css

2个回答

0
投票

html,body {
  margin: 0;
}

main {
  height: 100vh;
}

.parent {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topSection {
  flex: 0 0 20%;
}

.middleSection {
  flex: 1 1 50%;
  background-color: yellow;
}

.bottomSection {
  flex: 0 0 30%;
}

0
投票

我是新来的，希望这个答案可以帮助你：D

```
display: flex
```
｜设置布局为flex
```
flex-direction: column
```
｜设置flex方向为column
```
height: 100vh
```
｜设置外层div的高度为页面高度的100%
```
flex: <value>
```
｜设置div比例

<div style="display: flex; flex-direction: column; height: 100vh">
  <div style="flex:20%">
    This is Top Section
  </div>
  <div style="flex:50%">
    This is Middle Section
  </div>
  <div style="flex:30%">
    This is Bottom Section
  </div>
</div>

最新问题

© www.soinside.com 2019 - 2024. All rights reserved.