CODEWITHSUNDEEP
htmlcssflexbox
ThomasGeek
ThomasGeek

Reputation: 41

How to set top bottom and right side content using flexbox css

I am new in flexbox. I have try to set top , bottom and right side content. See Demo

But I need to set in mobile size like image.

enter image description here

Left side and right side is not same height.

Can we set like image mention above or any other type to set in mobile and tablet screen size

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.left {
  background: #f00;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.center {
  background: #ddd;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.right {
  background: #f00;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
<div class="main">
  <div class="left">
    <ul>
      <li>1 height not fix</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
      Large content
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
      <li>1 height not fix</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</div>

Upvotes: 3

Views: 198

Answers (3)

waqas Mumtaz
waqas Mumtaz

Reputation: 707

I simply add media queries to your css. You can modify it for various screen and set width, position etc for each screen.

.main{
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap; 
}
.left{
  background:#f00;
}
.center{
  background:#ddd;
}
.right{
  background:#f00;
  }
  
  
  @media screen and (min-width: 980px) {
.left{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%; 
    max-width: 25%; 
}
.center{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; 
}
.right{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; 
  }
  
}

@media screen and (max-width: 980px) {
 .left{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; 
    max-width: 100%; 
}
.center{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; 
}
.right{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; 
  }
}
<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
    Large content
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
</div>

EDIT: The best solution for your problem is to Use css grid: Flexbox is One Dimensional, Grid is Two Dimensional

.main{
 display: grid;
  grid-gap: 10px;
}

.left { grid-area: left; }
.center { grid-area: main; }
.right { grid-area: right; }

.left{
  background:#f00;
  padding: 10px;
}
.center{
  background:#ddd;
    padding: 10px;

}
.right{
  background:#f00;
    padding: 10px;

  }
  
  @media screen and (min-width: 980px) {
.main{
 display: grid;
  grid-template-areas:'left  main main  right'
    				  'left  main main  right';
  grid-gap: 10px;
}
}

@media screen and (max-width: 980px) {
 .main{
  grid-template-areas:'left  main main '
    				  'right  main main ';
}
}
<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
    Large content
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
</div>

Upvotes: 1

kp86284
kp86284

Reputation: 167

.main{
      display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .left{

      -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }
    .center{
      background:#ddd;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

     ul {
       background:#f00;
       margin-top: 0;
       margin-bottom: 20px;
       padding-top: 15px;
       padding-bottom: 15px;
     }


<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>

     <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
    Large content
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>

</div>

Upvotes: 0

IOOIIIO
IOOIIIO

Reputation: 599

I guess that you are aware that media queries need to be used in order to apply different behavior on different screen sizes, and that the real problem is how to position the <div> tags.

There are many different solutions, here is one:

First, you need to shift center section to be the first on top, so you can apply float property on smaller screens. In order for this to work, you need to define flex order property for bigger screens. If you are not that familiar with float property, you'll probably want to read about clearfix here: clearfix. Float 'rips' content out of the regular web page flow and clearfix restores it.

Here is an example for big screens: jsfiddle and here is an example for smaller ones: jsfiddle

Upvotes: 0

Related Questions