CODEWITHSUNDEEP
cssflexboxcss-float
TechnoCorner
TechnoCorner

Reputation: 5165

How can I implement this using flexbox?

I'm trying to implement Microsoft's Logo using CSS Float and CSS flexbox (just as a CSS practice exercise)

I got it working using floats however, I couldn't get it working with Flexbox. Can someone shed some insights on where I went wrong?

.box {
  height: 50px;
  width: 50px;
  padding: 20px;
}

.box1 {
  background-color: red;
  float:left;
}

.box2 {
  background-color: green;
  float: left;
}

.box3 {
  clear: both;
  float: left;
  background-color: blue;
}

.box4 {
  float: left;
  background-color: orange;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author">
        <title>MS</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
      </div>
    </body>
</html>

However, I tried implementing the same in flexbox and failed:

.box {
  height: 50px;
  width: 50px;
  padding: 20px;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.box1 {
  background-color: red;
  flex: 1;
}

.box2 {
  background-color: green;
  flex: 3;
  order: -1;
}

.box3 {
  background-color: blue;
  flex:2;
}

.box4 {
  background-color: orange;
  flex: 4;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author" content="Rupesh Dabbir">
        <title>LinkedIn</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
      </div>
    </body>
</html>

Can someone help on what I'm doing wrong?

Upvotes: 0

Views: 107

Answers (2)

Ernest
Ernest

Reputation: 199

.box {
  height: 50px;
  width: 50px;
  padding: 20px;
}
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width:200px;
}
.box1 {
  background-color: red;
}

.box2 {
  background-color: green;
}

.box3 {
  background-color: blue;
}

.box4 {
  background-color: orange;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author" content="Rupesh Dabbir">
        <title>LinkedIn</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
      </div>
    </body>
</html>

Upvotes: 0

zgood
zgood

Reputation: 12591

Change nowrap to wrap, then set a width to your container (180px in this case since each box is 50px + 20px padding left + 20px padding right) and remove all flex properties from the box items.

.box {
  height: 50px;
  width: 50px;
  padding: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 180px;
}

.box1 {
  background-color: red;
}

.box2 {
  background-color: green;
}

.box3 {
  background-color: blue;
}

.box4 {
  background-color: orange;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author" content="Rupesh Dabbir">
        <title>LinkedIn</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
      </div>
    </body>
</html>

Upvotes: 2

Related Questions