CSS弹性特性和弹性盒子

huangapple
go评论89阅读模式
英文:

css flex feature and flexbox

问题

如果我有一个包含三个 div 元素的容器 div，我想使用 flex 特性使 div1 和 div2 并排，div3 放在它们下方。

无论宽度或高度如何，它始终分成三个部分。

  1. <div id="container">
  2.   <div id="div1">这是 Div 1</div>
  3.   <div id="div2">这是 Div 2</div>
  4.   <div id="div3">这是 Div 3</div>
  5. </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.

  1. &lt;div id=&quot;container&quot;&gt;
  2.   &lt;div id=&quot;div1&quot;&gt;This is Div 1&lt;/div&gt;
  3.   &lt;div id=&quot;div2&quot;&gt;This is Div 2&lt;/div&gt;
  4.   &lt;div id=&quot;div3&quot;&gt;This is Div 3&lt;/div&gt;
  5. &lt;/div&gt;

As you can see above.

答案1

得分: 2

你尝试过使用CSS的grid布局吗？

  1. *, *::before, *::after { box-sizing: border-box; }
  2. html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
  3. body { display: flex; }
  5. #container {
  6.   display: grid;
  7.   grid-template-columns: repeat(2, auto);
  8.   flex: 1;
  9. }
  11. #div1 { background: cyan; }
  12. #div2 { background: yellow; }
  13. #div3 { background: magenta; grid-column: span 2; }
  1. <div id="container">
  2.   <div id="div1">This is Div 1</div>
  3.   <div id="div2">This is Div 2</div>
  4.   <div id="div3">This is Div 3</div>
  5. </div>
英文:

Have you tried the CSS grid layout?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. *, *::before, *::after { box-sizing: border-box; }
  2. html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
  3. body { display: flex; }
  5. #container {
  6.   display: grid;
  7.   grid-template-columns: repeat(2, auto);
  8.   flex: 1;
  9. }
  11. #div1 { background: cyan; }
  12. #div2 { background: yellow; }
  13. #div3 { background: magenta; grid-column: span 2; }

<!-- language: lang-html -->

  1. &lt;div id=&quot;container&quot;&gt;
  2.   &lt;div id=&quot;div1&quot;&gt;This is Div 1&lt;/div&gt;
  3.   &lt;div id=&quot;div2&quot;&gt;This is Div 2&lt;/div&gt;
  4.   &lt;div id=&quot;div3&quot;&gt;This is Div 3&lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

使用flex属性和flex-wrap属性，您可以将flex属性添加到容器中，以便div元素可以换行。

  1. * {
  2.   box-sizing: border-box;
  3. }
  5. #container {
  6.   display: flex;
  7.   flex-wrap: wrap;
  8. }
  10. #container>div {
  11.   border: 1px solid #000;
  12. }
  14. #div1,
  15. #div2 {
  16.   flex: 0 1 50%;
  17. }
  19. #div3 {
  20.   flex-grow: 1;
  21. }
  1. <div id="container">
  2.   <div id="div1">This is Div 1</div>
  3.   <div id="div2">This is Div 2</div>
  4.   <div id="div3">This is Div 3</div>
  5. </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 -->

  1. * {
  2.   box-sizing: border-box;
  3. }
  5. #container {
  6.   display: flex;
  7.   flex-wrap: wrap;
  8. }
  10. #container&gt;div {
  11.   border: 1px solid #000;
  12. }
  14. #div1,
  15. #div2 {
  16.   flex: 0 1 50%;
  17. }
  19. #div3 {
  20.   flex-grow: 1;
  21. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;container&quot;&gt;
  2.   &lt;div id=&quot;div1&quot;&gt;This is Div 1&lt;/div&gt;
  3.   &lt;div id=&quot;div2&quot;&gt;This is Div 2&lt;/div&gt;
  4.   &lt;div id=&quot;div3&quot;&gt;This is Div 3&lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月12日 23:04:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76672017.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定