英文:
css flex feature and flexbox
问题
如果我有一个包含三个 div 元素的容器 div，我想使用 flex 特性使 div1 和 div2 并排，div3 放在它们下方。
无论宽度或高度如何，它始终分成三个部分。
<div id="container">
<div id="div1">这是 Div 1</div>
<div id="div2">这是 Div 2</div>
<div id="div3">这是 Div 3</div>
</div>
如上所示。
英文:
If I have a container div and inside it, there are 3 divs, I want to make div1 and div2 next to each other and div3 below with the flex feature.
It is always divided into three parts, regardless of width or height.
<div id="container">
<div id="div1">This is Div 1</div>
<div id="div2">This is Div 2</div>
<div id="div3">This is Div 3</div>
</div>
As you can see above.
答案1
得分: 2
你尝试过使用CSS的grid布局吗？
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; }
#container {
display: grid;
grid-template-columns: repeat(2, auto);
flex: 1;
}
#div1 { background: cyan; }
#div2 { background: yellow; }
#div3 { background: magenta; grid-column: span 2; }
<div id="container">
<div id="div1">This is Div 1</div>
<div id="div2">This is Div 2</div>
<div id="div3">This is Div 3</div>
</div>
英文:
Have you tried the CSS grid layout?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; }
#container {
display: grid;
grid-template-columns: repeat(2, auto);
flex: 1;
}
#div1 { background: cyan; }
#div2 { background: yellow; }
#div3 { background: magenta; grid-column: span 2; }
<!-- language: lang-html -->
<div id="container">
<div id="div1">This is Div 1</div>
<div id="div2">This is Div 2</div>
<div id="div3">This is Div 3</div>
</div>
<!-- end snippet -->
答案2
得分: 1
使用flex属性和flex-wrap属性，您可以将flex属性添加到容器中，以便div元素可以换行。
* {
box-sizing: border-box;
}
#container {
display: flex;
flex-wrap: wrap;
}
#container>div {
border: 1px solid #000;
}
#div1,
#div2 {
flex: 0 1 50%;
}
#div3 {
flex-grow: 1;
}
<div id="container">
<div id="div1">This is Div 1</div>
<div id="div2">This is Div 2</div>
<div id="div3">This is Div 3</div>
</div>
英文:
Using flex you can add flex property to your container with flex-wrap so your div can goes to the new line.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
#container {
display: flex;
flex-wrap: wrap;
}
#container>div {
border: 1px solid #000;
}
#div1,
#div2 {
flex: 0 1 50%;
}
#div3 {
flex-grow: 1;
}
<!-- language: lang-html -->
<div id="container">
<div id="div1">This is Div 1</div>
<div id="div2">This is Div 2</div>
<div id="div3">This is Div 3</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论