我如何使用Flexbox创建此布局？

25 浏览
0 Comments

我如何使用Flexbox创建此布局？

我试图使用Flexbox（和React Native）创建此布局，但无论我做什么，左侧和右侧按钮都不会扩展到容器宽度的50％。它们始终是其内容的大小。

我使用嵌套容器。按钮位于一个列Flex容器中，该容器嵌套在包含图像的行Flex容器中。

\"enter

以下是我的JSX：

非常感谢所有回复...

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

你不想使用高度属性，但使用它是实现你想要的效果的好方法。以下是一个示例：

将图片设置为屏幕高度的90%，按钮容器设置为10%。

每个按钮的宽度为50%。

HTML

CSS

* {
  box-sizing: border-box;
}
body, html {
  height: 100%;
  margin: 0;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.container .image {
  width: 100%;
  height: 90%;
  background-image: url('path/to/image');
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container .buttons-container {
  display: flex;
  height: 10%;
}
.container .buttons-container button {
  width: 50%;
}

查看示例的效果 - https://codepen.io/kaiten/pen/YaYqZO

0
0 Comments

也许这可以帮助你：

.container{
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}
.image{
  height: 500px;
  flex-basis: 100%;
  background-color: green;
}
.button{
  box-sizing: border-box;
  flex-basis: 50%;
  height: 100px;
  background-color: red;
  border: solid 1px black;
}








如果您在使用 flexbox 方面遇到问题，可以使用这个资源，它对解决 flexbox 问题非常有帮助。希望现在您可以解决问题了。

									

				

									

			

			
0