如何解决CSS flexbox子行为
嘿,我是html和css的新手,我想做点什么,但是我找不到任何方法去做,或者我不太了解,我用一个示例制作了一个代码笔:{{3 }},这就是我需要的:https://codepen.io/chileseco/pen/rNemRoZ,还是我需要的不仅仅是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>
解决方法
您可以定义更具体的行为。请注意题外话:您不应使用超过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>
,
添加到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,255);
}
.child1{
display: flex;
flex: 40%;
background-color: rgb(240,104);
align-items:center;
justify-content:center;
}
.child2{
display: flex;
flex: 60%;
background-color: rgb(115,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>
,
您可以在子元素中使用flex属性。
.parent{
display: flex;
background-color: rgb(77,255);
min-height:100vh;
}
.child1{
flex:0.4;
background-color:rgb(240,104);
}
.child2{
flex:0.6;
background-color: rgb(115,115);
}
,
这是您要寻找的吗?
.parent{
display: flex;
background-color: rgb(77,255);
height: 1000px;
}
.child1{
flex: 40%;
display:flex;
background-color: rgb(240,104);
}
.child2{
flex: 60%;
display:flex;
background-color: rgb(115,115);
}
,
您只需向孩子添加flex: 60%
和flex:40%
首先,我将100%的宽度添加到您的父元素中
.parent {
display: flex;
width: 100%;
background-color: rgb(77,255);
}
然后我将40%添加到第一个孩子中,并将60%添加到第二个孩子中。还有一种新的很好的方式来居中元素。它是两个CSS规则的组合:display: grid;
启用第二个规则,即place-items: center;
.child1 {
background-color: rgb(240,104);
display: grid;
place-items: center;
width: 40%;
}
.child2 {
background-color: rgb(115,115);
display: grid;
place-items: center;
width: 60%
}
您还可以添加height: 100vh;
,以使父元素扩展到视口的高度
.parent {
display: flex;
width: 100%;
height: 100vh;
background-color: rgb(77,255);
}
整个代码:
.parent {
display: flex;
width: 100%;
height: 100vh;
background-color: rgb(77,255);
}
.child1 {
background-color: rgb(240,104);
display: grid;
place-items: center;
width: 40%;
}
.child2 {
background-color: rgb(115,115);
display: grid;
place-items: center;
width: 60%
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。