CSS flexbox子行为[重复]答案

【问题标题】：CSS flexbox child behavior [duplicate]CSS flexbox子行为[重复]
【发布时间】：2020-12-17 02:36:08
【问题描述】：

嘿，我是 html 和 css 的新手，我想做点什么，但我在任何地方都找不到怎么做，或者我理解的不是很好，我用一个例子做了一个 codepen：https://codepen.io/chileseco/pen/rNemRoZ这就是我需要的：http://prntscr.com/u7aw4v 还是我需要的不仅仅是 flex display？

感谢您的关注！

.parent{
  display: flex;
  background-color: rgb(77, 77, 255);
}
.child1{  
  background-color: rgb(240, 104, 104);
}
.child2{  
  background-color: rgb(115, 243, 115);
}

<div class="parent">

  <div class="child1">
    <h1>Child 1</h1>
  </div>

  <div class="child2">
    <h1>Child 2</h1>
  </div>

</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以定义更具体的行为。注意题外话：你不应该使用超过1个<h1>，让他们<h2>或其他东西。几个<h1> 会让屏幕阅读者感到困惑。

.parent{
  display: flex;
  flex-flow: row nowrap;
  background-color: rgb(77, 77, 255);
  /*height and Width, padding and margin for display example, you can set that how you need*/
  height: 100vh;
  max-width: 100vw;
  padding: 0;
  margin: 0;
}
.child1{ 
  /*Aligning the headings inside the divs*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(240, 104, 104);
  width: 40%;
}
.child2{ 
  /*Aligning the headings inside the divs*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(115, 243, 115);
  width: 60%;
}

<div class="parent">

  <div class="child1">
    <h1>Child 1</h1>
  </div>

  <div class="child2">
    <h1>Child 2</h1>
  </div>

</div>

【讨论】：

感谢 h1 提示，这只是作为示例，但我还是不知道。不错的回答。
没问题，这就是我们来这里的目的:)
您可以统一两个子元素的公共声明：.child1, .child2 {display: flex; justify-content: center; align-items: center;}。最后两个可以替换为place-items: center;。

【解决方案2】：

添加到child1

.child1{  
  display: flex;
  flex: 40%;
  align-items:center;
  justify-content:center;
}

添加到child2

.child1{  
  display: flex;
  flex: 60%;
  align-items:center;
  justify-content:center;
}

.parent{
  display: flex;
  background-color: rgb(77, 77, 255);
}

.child1{  
  display: flex;
  flex: 40%;
  background-color: rgb(240, 104, 104);
  align-items:center;
  justify-content:center;
}
.child2{  
  display: flex;
  flex: 60%;
  background-color: rgb(115, 243, 115);
  align-items:center;
  justify-content:center;
}

<div class="parent">

  <div class="child1">
    <h1>Child 1</h1>
  </div>
  
  <div class="child2">
    <h1>Child 2</h1>
  </div>

</div>

【讨论】：

【解决方案3】：

您可以在子元素中使用 flex 属性。

.parent{
  display: flex;
  background-color: rgb(77, 77, 255);
  min-height:100vh;
}
.child1{ 
  flex:0.4;
  background-color:rgb(240, 104, 104);
}
.child2{  
  flex:0.6;
  background-color: rgb(115, 243, 115);
}

【讨论】：

最小高度！我也需要这个，非常感谢！

【解决方案4】：

这是你要找的吗？

.parent{
  display: flex;
  background-color: rgb(77, 77, 255);
  height: 1000px;
}
.child1{
  flex: 40%;
  display:flex;
  background-color: rgb(240, 104, 104);
}
.child2{  
  flex: 60%;
  display:flex;
  background-color: rgb(115, 243, 115);
}

【讨论】：

是的，谢谢，但我还需要它们来填满所有的高度
@MarioJose 编辑了它。只需添加所需的高度。
Warden 下面有一个完整的例子。
请将每个孩子添加到display:flex; 以获取样式flex
@RubixOverflow 我已经看到你和 Wardens 的回答了。方式更广泛，因此更好。

【解决方案5】：

您只需将flex: 60% 和flex:40% 添加到您的孩子

【讨论】：

【解决方案6】：

首先我为你的父元素添加 100% 的宽度

.parent {
  display: flex;
  width: 100%;
  background-color: rgb(77, 77, 255);
}

然后我给第一个孩子加上 40%，给第二个孩子加上 60%。还有一种新的好方法可以使元素居中。这是两个css规则的组合：display: grid;启用第二个规则，即place-items: center;

.child1 {  
  background-color: rgb(240, 104, 104);
  display: grid;
  place-items: center;
  width: 40%;
}
.child2 {  
  background-color: rgb(115, 243, 115);
  display: grid;
  place-items: center;
  width: 60%
}

您还可以添加height: 100vh; 以使父元素扩展到视口的高度

.parent {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: rgb(77, 77, 255);
}

整个代码：

.parent {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: rgb(77, 77, 255);
}

.child1 {
  background-color: rgb(240, 104, 104);
  display: grid;
  place-items: center;
  width: 40%;
}

.child2 {
  background-color: rgb(115, 243, 115);
  display: grid;
  place-items: center;
  width: 60%
}

【讨论】：