Question 247916 in Html Question posted in
Some basic documentation can be found here.

Html – Make div is first by specific class

I need To Make The div is The First one appeared in the left, as below photo, note that this div has class eligible and others has class noneligible. note the the parent has display:flex;

This is the div that i want

i tried to give the target div flex:1; but not working.

Tags:

2

Answers


  1. 0 
    body{
  padding: 25px;
}
.parent{
  display: flex;
}
.div{
  margin: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
}
.div3{
  order: 1;
}
.div2{
  order: 3;
}
.div1{
  order: 2;
}
    <!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="parent">
       <div class="div div1" >
       1
     </div>
     <div class="div div2">
       2
     </div>
     <div class="div div3">
       3
     </div>
    </div>
  </body>
</html>

    You have give css to parent to flex and child class you have to give them order property as you want.
    Try this one, Hope so your requirement will be fulfill from this code.

    Login or Signup to reply.
  2. 0

    It can be made with order as in below; Also, if there is only 3 divs (static), you can use flex-direction: row-reverse; for it.

      <div class="content">
    <div class="box red">A</div>
    <div class="box lightblue">B</div>
    <div class="box yellow">C</div>
  </div>

    and for the style:

    .content {
  display: flex;
  max-width:100px;
  flex-direction: row-reverse;
}
.box {
  width: 50px;
  height: 50px;
}
.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search