CODEWITHSUNDEEP
htmlcssflexbox
Sachin Jadhav
Sachin Jadhav

Reputation: 124

Flexbox layout item width

I want to create a layout like in this using flexbox. I have put my code in the snippet. I want Flex Item 1 to occupy 60% of the flex container width and Flex Item 2 to occupy 40% of the width and Flex Item 3 and 4 to occupy 40% and 60% of the width. I tried using flex-grow on the flex items and it didn't work.

screenshot

.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>

Upvotes: 1

Views: 6206

Answers (3)

Sachin Jadhav
Sachin Jadhav

Reputation: 124

I switched to grid instead of flexbox as it is easier to create what I want using grid. I used the code from an answer here but now I can't seem to find the answer for some reason and I don't remember who posted it and I also wanted an explanation about what grid-template-columns: repeat(3, 1fr);, grid-column: 1 / span 2; and grid-column: 2 / span 2; actually do. I also wanted to know how I can decrease the height of my grid container.

.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>

Upvotes: 0

ciekals11
ciekals11

Reputation: 2155

for layout like this I will suggest you to use grid instead.

.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>

Upvotes: 0

hgb123
hgb123

Reputation: 14891

You could use flex-basis on this

flex-basis CSS property sets the initial main size of a flex item

Just to notice, because you use 1% for margin, so both left and right of an item will already take of 2%, so 40% will turn out to be 38%, while 60% will turn out to be 58%

But as a suggestion, in my opinion, use grid on this will be less painful

.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>

Upvotes: 1

Related Questions