I am looking to divide my webpage into multiple columns, starting with three but potentially adding more in the future.
My current approach involves using Flexbox to create equal-width columns:
<style>
.container {
display: flex;
}
.column {
flex: 1;
/*for demo purposes only */
background: #f2f2f2;
/*border: 1px solid #e6e6e6;*/
box-sizing: border-box;
padding-left: 100px;
padding-right: 100px;
padding-top: 50px;
text-align: center;
}
.column-one {
order: 1;
}
.column-two {
order: 2;
}
.column-three {
order: 3;
}
</style>
Although this setup creates equally sized columns, I now want the second column to be smaller, occupying only 50% of the width.
I have attempted adjusting the width of the .column-two class, but without success. Is it feasible to achieve this customization within the existing code structure?
I appreciate the simplicity and flexibility of this design, as adding additional columns does not necessitate extensive CSS modifications. Hence, I aim to retain this framework for future enhancements.