Question 228238 in CSS Question posted in
Some basic documentation can be found here.

Css – How do i build the following example with flexbox (image attached)

How do I build the example shown in the image below with flexbox? I don’t know enough about flexbox to get the following design to work. Please help.

enter image description here

<div class="container">
<div class="flex-1"></div>
<div class="flex-2"></div>
<div class="flex-3"></div>
<div class="flex-4"></div>
</div>

.container {
  height: 200px;
  width: 300px;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-1,
.flex-2,
.flex-3,
.flex-4 {
  margin: 10px;
  width: 100px;
  height: 100px;
}

.flex-1 {
  position: relative;
 
  background-color: green;
  width:200px;
  margin-left:200px;
}

.flex-2 {
  position: relative;
  background-color: red;
  flex-direction:row
}

.flex-3 {
  background: orange;
  width: 100px
}

.flex-4 {
  background: blue;
  width: 100px
}

Here is a fiddle with my futile attempt: https://jsfiddle.net/oq4m9Lha/1/

I can do this all day with CSS floats, but I’m trying to expand my horizons.

Tags:

2

Answers


  1. 0

    Here’s one example:

    HTML

    <div class="flex flex-wrap">
  <div class="basis-one-third">&nbsp;</div>
  <div class="bg-red basis-two-thirds row-end">&nbsp;</div>
  <div class="bg-red basis-one-third">&nbsp;</div>
  <div class="bg-red basis-one-third">&nbsp;</div>
  <div class="bg-red basis-one-third row-end">&nbsp;</div>
</div>

    CSS

    *, * > *, * * {
  box-sizing: border-box;
}

.flex {
  display: flex;
  width: 500px;
  margin: 0 auto;
}

.flex > div {
  min-height: 200px;
  margin-bottom: 1rem;
}

.flex > div:not(.row-end) {
  margin-right: 1rem;
}

.flex-wrap {
  flex-wrap: wrap;
}

.bg-red {
  background-color: red;
}

.basis-one-third {
 width: calc(33.3334% - 1rem);
}

.basis-two-thirds {
 width: calc(66.6667% - 1rem);
}

.row-end {
  margin-right: 0;
}

    CODEPEN: https://codepen.io/UncleRemus/full/poQXyVg

    /// EDIT: ///

    Adding Solution the original poster went with (bubbling up from comments)

    HTML

    <div class="flex-container">
    <div class="flex-item">I'm the biggest!</div>
    <div class="flex-item">#2</div>
    <div class="flex-item">#3</div>
    <div class="flex-item">#4</div>
</div>

    CSS

    .flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-container .flex-item {
  background-color: #d94a6a;
  flex: 1 1 0;                                       /*  for 2nd line to not wrap  */
  margin: 0 1px;                                                
  overflow: hidden;                                  /*  for 2nd line to not wrap  */
  min-height: 75px;
  text-align: center;
  -webkit-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
}

.flex-container .flex-item:nth-child(1) {
  background-color: #3b5bb2;
  flex-basis: 100%;                                  /*  make first take full width  */
  min-height: 400px;
  margin-left:33%;
  margin-bottom: 20px;
}
    Login or Signup to reply.
  2. 0

    there are a few adjustments needed.

    HTML:
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="inner-flex"></div>
    <div class="inner-flex"></div>
  </div>
  <div class="flex-3"></div>
  <div class="flex-4"></div>
</div>

CSS:
.container {
  height: 200px;
  width: 300px;
  display: flex;
  flex-direction: row;
}

.flex-1,
.flex-2,
.flex-3,
.flex-4 {
  margin: 10px;
  width: 100px;
  height: 100px;
}

.flex-1 {
  background-color: green;
  width: 200px;
  margin-left: auto;
}

.flex-2 {
  display: flex;
  flex-direction: column;
  background-color: red;
}

.inner-flex {
  flex: 1;
  margin: 5px;
  background-color: lightyellow;
}

.flex-3 {
  background: orange;
  width: 100px;
}

.flex-4 {
  background: blue;
  width: 100px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search