I have been attempting to create 2 menu bars, but I am facing difficulty aligning the menu buttons horizontally due to the uneven number of elements. I have tried various properties such as max-width, flex-basis, flex-grow, and flex-shrink, but I have not been able to achieve the desired outcome.
Below is a code snippet for reference :
body {
background-color: black;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.row{
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
}
p, .myCustomButton {
border-radius: 4px;
height: 2.8em;
font-size: 1.6rem;
color: #fff;
background-color: red;
margin: 0.4rem 0.2rem;
padding: 0 1em;
flex: 1;
}
.row2 {
justify-content: flex-end;
}
.myCustomButton {
max-width: 20%;
flex: 0.1 0.1 auto;
}<div class='row'>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<div class='row row2'>
<p class='myCustomButton'>test</p>
</div>I am looking to maintain consistent sizing between my custom button and test buttons in all situations (responsive design). What CSS property should I focus on to achieve this? I believe flex-basis might be the key, but I am unsure of how to properly implement it. Any guidance or suggestions would be greatly appreciated.
Thank you in advance.