Flexbox 布局项宽度答案

【问题标题】：Flexbox layout item widthFlexbox 布局项宽度
【发布时间】：2021-06-17 23:18:11
【问题描述】：

我想使用 flexbox 创建一个像这样的布局。我已经把我的代码放在了 sn-p 中。我希望 Flex Item 1 占据 flex 容器宽度的 60%，Flex Item 2 占据 40% 的宽度，Flex Item 3 和 4 占据 40% 和 60% 的宽度。我尝试在 flex 项目上使用 flex-grow，但它不起作用。

.flex-container1 {
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  margin: auto;
  background-color: #222;
}

.flex-container1>.flex-item {
  flex: 0 0 48%;
}

.flex-item {
  margin: 1%;
  background-color: #FFFF00;
  height: 100px;
}

<div class="container-fluid">
  <div class="flex-container1">

    <div class="flex-item flex-item1"> <img id="blog-banner" src=""> Flex Item 1 </div>
    <div class="flex-item flex-item2"> <img id="blog-banner" src=""> Flex Item 2 </div>
    <div class="flex-item flex-item3"> <img id="blog-banner" src=""> Flex Item 3 </div>
    <div class="flex-item flex-item4"> <img id="blog-banner" src=""> Flex Item 4 </div>

  </div>
</div>

【问题讨论】：

在这种情况下最好使用网格。

标签： html css flexbox

【解决方案1】：

您可以在此使用flex-basis

flex-basis CSS 属性设置弹性项目的初始主尺寸

请注意，因为您使用 1% 作为边距，所以一个项目的左右都已经占 2%，所以 40% 将变为 38%，而 60% 将变为 58 %

但作为一个建议，在我看来，使用grid 会不那么痛苦

.flex-container1 {
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  margin: auto;
  background-color: #222;
}

.flex-item {
  margin: 1%;
  background-color: #FFFF00;
  height: 100px;
}

.flex-item1, .flex-item4 {
  flex-basis: 38%;
}

.flex-item2, .flex-item3 {
  flex-basis: 58%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <div class="container-fluid">
    <div class="flex-container1">
      <div class="flex-item flex-item1"> <img id="blog-banner" src=""> Flex Item 1 </div>
      <div class="flex-item flex-item2"> <img id="blog-banner" src=""> Flex Item 2 </div>
      <div class="flex-item flex-item3"> <img id="blog-banner" src=""> Flex Item 3 </div>
      <div class="flex-item flex-item4"> <img id="blog-banner" src=""> Flex Item 4 </div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

对于这样的布局，我建议你改用grid。

.container {
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
}

.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.grid-item {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lime;
}

.grid-item:nth-child(4n-3) {
    grid-column-start: 1;
    grid-column-end: 3;
}

.grid-item:nth-child(4n-2) {
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-item:nth-child(4n-1) {
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-item:nth-child(4n) {
    grid-column-start: 2;
    grid-column-end: 4;
}

<div class="container">
    <div class="grid-container">
        <div class="grid-item"> Grid Item 1 </div>
        <div class="grid-item"> Grid Item 2 </div>
        <div class="grid-item"> Grid Item 3 </div>
        <div class="grid-item"> Grid Item 4 </div>

        <div class="grid-item"> Grid Item 5 </div>
        <div class="grid-item"> Grid Item 6 </div>
        <div class="grid-item"> Grid Item 7 </div>
        <div class="grid-item"> Grid Item 8 </div>
    </div>
</div>

【讨论】：

【解决方案3】：

我切换到网格而不是 flexbox，因为使用网格更容易创建我想要的内容。我在这里使用了答案中的代码，但现在由于某种原因我似乎找不到答案，我不记得是谁发布的，我还想解释一下 grid-template-columns: repeat(3, 1fr);、grid-column: 1 / span 2; 和 grid-column: 2 / span 2; 的内容实际上做。我还想知道如何降低网格容器的高度。

.grid-container1 {
    display: grid;
    width: 60%;
    margin: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 6px;
    margin: 5% auto;
    background-color: #FFFF00;
}

.grid-item {
    background-color: #FF0000;
    color: #fff;
}

.grid-item-1 {
    grid-column: 1 / span 2;
}
  
.grid-item-4 {
    grid-column: 2 / span 2;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Aasha Initiative</title>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/fontawesome.css">

</head>

<body>


  <div class="grid-container1">
    <div class="grid-item grid-item-1"><img src="">Grid Item-1</div>
    <div class="grid-item grid-item-2"><img src="">Grid Item-2</div>
    <div class="grid-item grid-item-3"><img src="">Grid Item-3</div>
    <div class="grid-item grid-item-4"><img src="">Grid Item-4</div>
  </div>


  </div>
</body>

</html>

【讨论】：