Center flex divs horizontally [duplicate] - css

Question

This question already has answers here:
Special div shrinking
(2 answers)
Closed 5 years ago.
I have three divs that have different flex-basis. In order to make page responsive I want to put them centered one under one if width of the screen is less then 1000px.
Here's my example on Codepen:
.wrapper {
display: flex;
margin: 0 auto;
max-width: 1310px;
}
.left {
flex-basis: 555px;
}
.left__nav {
display: inline-block;
padding: 5px;
text-decoration: none;
}
.wrapper .right {
flex-basis: 462px;
display: flex;
justify-content: flex-end; /* align right (at end) */
}
.wrapper .button {
flex-basis: 193px;
text-align: center;
}
/* style for this demo */
.wrapper > div {
box-sizing: border-box;
border: 1px solid black;
border-collapse: collapse;
}
.mark-center {
text-align: center;
font-size: 30px;
color: red;
}
.container-small {
text-align: center;
background-color: lightgray;
max-width: 1100px;
margin: auto;
}
<div class="wrapper">
<div class="left">
<div class="links">
<a class="left__nav" href="#">Left Nav </a>
</div>
</div>
<div class="right">
Right
</div>
<div class="button">
Button
</div>
</div>
<div class="mark-center">
↑
</div>
<div class="container-small">
Center
</div>
Help me to put them that way if width < 1000px next way:

Answer 1

Seems to me you don't want flex-basis, you want width since these elements don't grow or shrink.
If so, you can use a media query and change the flex-direction to column after switching the flex-basis properties to width.
#media (max-width:1100px) {
.wrapper {
flex-direction:column;
align-items: center;
}
}
.wrapper {
display: flex;
margin: 0 auto;
max-width: 1310px;
}
.left {
width: 555px;
}
.left__nav {
display: inline-block;
padding: 5px;
text-decoration: none;
}
.wrapper .right {
width: 462px;
/* display: flex; */
/* justify-content: flex-end; */
/* align right (at end) */
}
.wrapper .button {
width: 193px;
text-align: center;
}
/* style for this demo */
.wrapper>div {
box-sizing: border-box;
border: 1px solid black;
border-collapse: collapse;
}
.mark-center {
text-align: center;
font-size: 30px;
color: red;
}
.container-small {
text-align: center;
background-color: lightgray;
max-width: 1100px;
margin: auto;
}
#media (max-width:1100px) {
.wrapper {
flex-direction: column;
align-items: center;
text-align: center;
}
}
<div class="wrapper">
<div class="left">
<div class="links">
<a class="left__nav" href="#">Left Nav </a>
</div>
</div>
<div class="right">
Right
</div>
<div class="button">
Button
</div>
</div>
<div class="mark-center">
↑
</div>
<div class="container-small">
Center
</div>