文章/答案/技术大牛

发布

社区首页 >问答首页 >Flex布局-让容器中的元素位于同一行。

问Flex布局-让容器中的元素位于同一行。
EN

Stack Overflow用户

提问于 2021-04-05 10:22:19

回答 2查看 34关注 0票数 0

我有一个关于flex的问题，我不能在同一排做子图.

我现在的页面:主图表

副图1

副图2

副图3

次级图4

副图5

副图6

副图7

副图8

这就是我想要的:主图表

子图1次图2

子图3次图4

子图5次图6

子图7次图8

这是我的码页

HTML

.dashboard {
  display: flex;
  flex-wrap: wrap;
}


.main-chart {
  height: 600px;
  margin: 10px;
  padding: 20px;
  flex: 1 100%;
  border-radius: 10px;
  background: #BDCCFF;
}

.row {
  flex: 1 100%;
}

.sub-chart {
  flex-basis: 50%;
  height: 400px;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  background: pink;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Flex 1</title>
    <link rel="stylesheet" href="my-flex-1.css">
</head>

<body>
<div class="dashboard">
    <div class="main-chart">Main chart</div>

    <div class="row">
        <div class="sub-chart even">Sub Chart 1</div>
        <div class="sub-chart odd">Sub Chart 2</div>
    </div>

    <div class="row">
        <div class="sub-chart even">Sub Chart 3</div>
        <div class="sub-chart odd">Sub Chart 4</div>
    </div>

    <div class="row">
        <div class="sub-chart even">Sub Chart 5</div>
        <div class="sub-chart odd">Sub Chart 6</div>
    </div>

    <div class="row">
        <div class="sub-chart even">Sub Chart 7</div>
        <div class="sub-chart odd">Sub Chart 8</div>
    </div>
</div>
</body>
</html>

html

css

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-04-05 10:39:31

这个很管用。它应该除以你想要的子图表的数量。例如，如果你想要3，你把它设置为flex: 1 33.33%

.row {
    flex: 1 50%;
}

票数 0

Stack Overflow用户

发布于 2021-04-05 10:31:56

只需在行类中更改flex: 1 50%;

.row {
    flex: 1 50%;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66951484

复制

相似问题

问Flex布局-让容器中的元素位于同一行。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flex布局-让容器中的元素位于同一行。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flex布局-让容器中的元素位于同一行。
EN