CODEWITHSUNDEEP
htmlcssflexbox
Asante Michael
Asante Michael

Reputation: 51

How do I divide a row of a flexbox in CSS into 2 columns and show a full width on 786px screen width?

I am trying to style an html page with CSS using a flexbox. Image below: enter image description here

The challenge I'm having is that on a larger screen, I will want to align div3 & div4 on a single row and on a media query of max-width: 768px, show all div on a single row.

For what I have done so far, I have been able to show all div's on a full width(I understand it is supposed to be on a media query: 768px) but what am having a challenge is to split the row 3 for div3 and div4.

HTML

*{
    padding: 0;
    margin: 0;
}

body,
html,
.container-1{
    width: 100%;
    height: 100%;
}

.container-1{
    display: flex;
    flex-direction: column;
}

#box-1{
    flex:1;
    background: #00B7EB;
    text-transform: uppercase;
    text-align: center;
}

#box-2{
    flex:1;
    background: #FF0000;
    text-transform: uppercase;
    text-align: center;
}



#box-3{
    flex:1;
    background: #00FF00;
    text-transform: uppercase;
    text-align: center;
}


#box-4{
    flex:1;
    background: #800080;
    text-transform: uppercase;
    text-align: center;
}


#box-5{
    flex:1;
    background: #444444;
    text-transform: uppercase;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>My CSS is Easy</title>
</head>
<body>
<div class="container-1">

    <div id="box-1">
        header
    </div>
        
    <div id="box-2">
       hero
    </div>

    <div id="box-3">
        content
    </div>
       
    <div id="box-4">
        sidebar
    </div>

    <div id="box-5">
       footer
    </div>

</div>
</body>
</html>

Upvotes: -1

Views: 1801

Answers (1)

Julien Ripet
Julien Ripet

Reputation: 558

You can put your div 3 and 4 inside a parent, and give them a min-width of half the width at which you want them to fold back. Like this

* {
  padding: 0;
  margin: 0;
}

body,
html,
.container-1 {
  width: 100%;
  height: 100%;
}

.container-1 {
  display: flex;
  flex-direction: column;
}

#box-1 {
  flex: 1;
  background: #00b7eb;
  text-transform: uppercase;
  text-align: center;
}

#boxContainer {
  flex: 1;
  background: #00ff00;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
}
#box-2 {
  flex: 1;
  background: #ff0000;
  text-transform: uppercase;
  text-align: center;
}

#box-3 {
  flex: 1;
  min-width: 384px;
  background: #00ff00;
  text-transform: uppercase;
  text-align: center;
}

#box-4 {
  min-width: 384px;

  flex: 1;
  background: #800080;
  text-transform: uppercase;
  text-align: center;
}

#box-5 {
  flex: 1;
  background: #444444;
  text-transform: uppercase;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>My CSS is Easy</title>
  </head>
  <body>
    <div class="container-1">
      <div id="box-1">header</div>

      <div id="box-2">hero</div>
<div id="boxContainer">
    
    <div id="box-3">content</div>
    
    <div id="box-4">sidebar</div>
</div>

      <div id="box-5">footer</div>
    </div>
  </body>
</html>

Upvotes: 3

Related Questions