I have a section of the site that must contain three elements side by side. Each element has a minimum width. If the width of the screen is not sufficient to contain all three elements, those that do not fit, go into a new line.
To build this layout I used Flex. Code.
html:
<main id='main'> <div id='firstRow' class='row'> <div id='col1C' class='col'>col1C title <div id='col1Ccon'>col1Ccon content</div> </div> <div id='col2C' class='col'>col2C title <div id='col2Ccon'>col2Ccon content</div> </div> <div id='col3C' class='col'>col3C title <div id='col3Ccon'>col3Ccon content</div> </div> </div> </main> css:
:root { --w1Col: 478px; --w2Col: 370px; --w3Col: 350px; --wSum3: calc(var(--w1Col) + var(--w2Col) + var(--w3Col)); } html { /*height: 100%;*/ } body { margin: 0; font-size: 9pt; font-family: 'Roboto', sans-serif; font-weight: 300; background-color: whitesmoke; height: 100%; display: flex; flex-direction: column; } /*************************************************************** * Layout first row */ #main { background-color: white; /*border: 4px solid red;*/ color: black; height: 100%; flex-grow: 1; /* ability for a flex item to grow if necessary */ flex-shrink: 0; /* ability for a flex item to shrink if necessary */ flex-basis: auto; /* defines the default size of an element before the remaining space is distributed */ } #firstRow { background-color: white; /*border: 1px solid black;*/ margin: 10px; padding: 10px; display: flex; flex-direction: row; /* colums layout */ flex-wrap: wrap; /* wrap in multiple lines if it's necessary */ /*min-width: var(--wSum3);*/ /*justify-content: flex-end; defines the alignment along the main axis */ } #firstRow .col { /*border: 1px solid black;*/ flex: 1; padding: 5px; text-align: center; } #col1C { background-color: green; width: var(--w1Col); min-width: var(--w1Col); order: 1; /* column order */ flex-basis: 40%;/*var(--w1Col); column width */ justify-content: flex-end; } #col2C { background-color: blue; width: var(--w2Col); min-width: var(--w2Col); order: 2; /* column order */ flex-basis: 35%; /* var(--w2Col); column width */ justify-content: flex-end; } #col3C { background-color: red; width: var(--w3Col); min-width: var(--w3Col); order: 3; /* column order */ flex-basis: 25%; /*var(--w3Col); column width */ justify-content: flex-end; } #col1Ccon, #col2Ccon, #col3Ccon { /*border: 1px solid black;*/ margin: 0 auto; /* center content */ } #col1Ccon { width: var(--w1Col); background-color: lightgreen; height: 200px; } #col2Ccon { width: var(--w2Col); background-color: lightblue; height: 150px; } #col3Ccon { width: var(--w3Col); background-color: salmon; height: 200px; } The code works but there are some tricks I would like to fix.
the 3 columns all have the same width and I would like to be able to choose this width. This is because the first element has a minimum width greater than the other two, so the edge is smaller and aesthetically ugly. See the same example, I changed only colors
the remaining space now grows on both sides of the
col*Cconcontainers. Instead I would like to grow only on the left side ofcol1Cconand on the right sidecol3Ccon. I would therefore like the contents of the site (col1Ccon + col2Ccon + col3Ccon) to always remain in the center of the page and what changes are the "border" that grow and decrease.
I'm stuck and any suggestions are greatly appreciated. Thanks :)
0 comments:
Post a Comment