With a media query of flex-diraction:colom, how to reduce the width of the boxes and put them in the center?

S

Sergey Kolesnik2020-04-21 05:53:35

css

Sergey Kolesnik, 2020-04-21 05:53:35

Task: when the screen decreases from 1150px, the blocks should be rebuilt in a different order into a column and change their width and height. With this code, when rebuilding blocks, they stretch to the full width of the screen. We managed to change the width using width but how to center them and increase the height?

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8"/>
    <title>CAGE MANAGEMENT</title>
    <link href="try.css" rel="stylesheet" type="text/css"/>
    <meta name="vievport" content="width=device-width">
  </head>

  <body>
    <div class="content">	
        <div class="block1">
          men
        </div>
        <div class="block2">
          logo
        </div>
        <div class="block3">
          women
        </div>
    </div>
  </body>
</html>

@media(max-width: 1150px){
  .content{
    max-width: 500px;
    flex-direction: column;
  }
  .block2{
    order: -1;
  }
  
}
.content{
  width: 100%;
  max-width: 1100px;
  height: 615px;
  margin: 2.5% auto;
  background-color: red;
  display: flex;
}
.content div{
  border:1px solid silver;
}

.block1{
  background-color: green;
  height: 500px;
  flex: 1;
}

.block2{
  background-color: green;
  flex: 1.2;
  
}

.block3{
  background-color: green;
  height: 500px;
  flex: 1;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

McBernar, 2020-04-21
@Serhii_Kolesnyk

Align-items: center