I have a page that is 50/50 wide. The left half has a row with six divs.
Criteria:
6 squares must always remain square.
First 5 squares should have margin/padding to right for separation.
All six squares must stay on same single row. If I can get that to work i can make the needed adjustments for responsiveness in smaller viewports.
Cross browser compatible for newest version of ie, chrome, and firefox.
My codepen: https://codepen.io/johnsontroye/pen/zzNVBr
Image:
<body>
<div class="container">
<div class="column" style="margin-right: 20px">
<div class="flex-container">
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L1
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L2
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L3
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L4
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L5
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L6
</div>
</div>
</div>
</div>
</div>
<div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px">
Other stuff
<div>
</body>
.container {
display: flex;
flex-direction: row;
padding: 25px;
border: 2px red solid;
}
.column {
width: 100%;
height: 100%;
float: left;
}
.flex-container {
padding: 0;
font-size: 0;
border: 1px solid black;
box-sizing: border-box;
}
.flex-item {
position: relative;
display: inline-block;
height: 0;
width: 100%;
padding-top: 100%;
border: 1px black solid;
font-size: 20px;
color: black;
font-weight: bold;
text-align: center;
box-sizing: border-box;
}
#media (min-width: 480px) {
.flex-item {
width: 33.3333%;
padding-top: 33.3333%;
}
}
#media (min-width: 768px) {
.flex-item {
width: 16.6666%;
padding-top: 16.6666%;
}
}
.flex-item-inner {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-right: 25px;
background: white;
border: 1px solid red;
box-sizing: border-box;
}
.flex-item-inner-content {
border: 1px solid orange;
}
.flex-item:last-child .flex-item-inner {
margin-right: 0;
color: green;
}
The main trick here is to make the div a square.
Normally one set a width, the height to 0 and a padding that equals to the width
.square {
height: 0;
width: 33%;
padding-bottom: 33%;
background: lightgray;
}
<div class="square">
<div>
Content
</div>
</div>
Now, when we add display: flex, we can't use padding with percent (Firefox bug) and we can't use height with percent since we used height: 0.
To overcome these issues when can use viewport units vw instead, and with that we can also use height instead of padding to keep it squared.
So instead of setting a width like this, calc((100% / 6) - 10px);, to spread 6 items equally with a gutter about 10px wide, we use viewport units like this calc(( (50vw - 65px) / 6) - 10px);
The 50vw is half the browser width, the 65px is the sum of the container's left/right padding, 50px, plus the 15px gutter between the columns.
This also allows us to skip the extra flex-item-inner element, skip using position: absolute on the content element, and, as we didn't use percent for the height on the flex-item, we can do like this to center the content
.flex-item-content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
And the end result is this
Fiddle demo
Stack snippet
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 25px;
border: 2px red solid;
}
.column {
flex-basis: calc(50% - 15px);
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
position: relative;
flex-basis: calc(( (50vw - 65px) / 6) - 10px);
height: calc(( (50vw - 65px) / 6) - 10px);
background: white;
border: 1px solid red;
overflow: hidden;
}
.flex-item-content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item:last-child .flex-item-content {
color: green;
}
.column .other {
padding: 15px;
border: 1px solid black;
padding-bottom: 35px;
}
.column.left .other {
margin-top: 10px;
}
.column.right .other:nth-child(n+2) {
margin-top: 10px;
}
#media (max-width: 768px) {
.flex-item {
flex-basis: calc(( (50vw - 65px) / 3) - 10px);
height: calc(( (50vw - 65px) / 3) - 10px);
}
.flex-item:nth-child(n+4) {
margin-top: 12px;
}
}
#media (max-width: 480px) {
.flex-item {
flex-basis: calc(( (50vw - 65px) / 2) - 10px);
height: calc(( (50vw - 65px) / 2) - 10px);
}
.flex-item:nth-child(n+3) {
margin-top: 15px;
}
}
<div class="container">
<div class="column left">
<div class="flex-container">
<div class="flex-item">
<div class="flex-item-content">
L1
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L2
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L3
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L4
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L5<br>L5
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L6
</div>
</div>
</div>
<div class="other">
Other stuff - left
</div>
</div>
<div class="column right">
<div class="other">
Other stuff - right
</div>
<div class="other">
Other stuff - right
</div>
</div>
</div>
This is doable with some fairly simple code, as long as the parent column's width is consistent at 50%-ish, and that the space between squares don't have to be strictly equal to a certain value. The vw (viewport width percentage) unit allows for a consistent size to be applied to both width and height of an element.
Here is an example that I boiled down to the fewest elements, and some notes help to move it in to your codebase.
Experiment with .flex-item's height and flex-basis (third value of flex) to get a size you like.
No padding or margin values are needed because justify-content: space-between; helpfully calculates that for us.
Using a line-height equal to the height of .flex-item would allow for an inner element with display: inline-block; and vertical-align: middle; to be centred.
.column {
width: 48vw;
height: 48vw;
padding: 1vw;
border: 1px solid #ccc;
}
.flex-container {
display: flex;
flex-flow: row;
justify-content: space-between;
}
.flex-item {
height: 6vw;
line-height: 6vw;
text-align: center;
border: 1px solid #ccc;
flex: 0 0 6vw;
}
<div class="column">
<div class="flex-container">
<div class="flex-item">
L1
</div>
<div class="flex-item">
L2
</div>
<div class="flex-item">
L3
</div>
<div class="flex-item">
L4
</div>
<div class="flex-item">
L5
</div>
<div class="flex-item">
L6
</div>
</div>
</div>
Only in the latest browsers? CSS Grid to the rescue! It's got great support in the latest versions. You may need some vendor prefixes still; check on CanIUse for the details.
Here it is as a fork: https://codepen.io/jackmakesthings/pen/MoJNNV
.container {
display: flex;
flex-direction: row;
padding: 25px;
border: 2px red solid;
}
.column {
width: 100%;
height: 100%;
float: left;
}
.grid-row {
display: grid;
grid-gap: 10px; /* set this to whatever space you need between boxes */
grid-template-columns: repeat(6, 1fr); /* grid autosizes 6 columns */
}
.row-item {
grid-column: 1 / 7; /* to span the whole row */
border: 1px solid;
padding: 10px;
}
.grid-item {
position: relative;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* This is a nifty trick for getting those fixed aspect ratio boxes. */
.grid-item:before {
content: '';
float: left;
width: 0;
height: 0;
padding-bottom: 100%;
}
.grid-item:after {
display: table;
clear: both;
}
/* Responsive grid changes? Sure! */
#media (max-width: 1000px) {
/* We just have to change the grid template: */
.grid-row {
grid-template-columns: repeat(3, 1fr);
}
/* Unexpected thing I ran into - you also have to change this, or the grid stays big enough to accommodate the old 6-column-sized row-item. Makes sense, but vexed me for a minute! */
.row-item {
grid-column: 1 / 4;
}
}
<div class="container">
<div class="column" style="margin-right: 20px">
<div class="grid-row">
<div class="grid-item">L1</div>
<div class="grid-item">L2</div>
<div class="grid-item">L3</div>
<div class="grid-item">L4</div>
<div class="grid-item">L5</div>
<div class="grid-item">L6</div>
<div class="row-item">some other thing</div>
<div class="row-item">and another</div>
</div>
</div>
<div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px">
Other stuff
<div>
Related
I'm trying to align div horizontally as the browser resizes, currently, I have 3 divs. As per the requirement, I can add an additional div. My problem is as soon I increase the window size above 2500, the right side of the screen becomes empty & all the divs are floating to left. As I cannot set the div width to 30-33% as per the requirement. Below is my code. kindly help.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
float: left;
display: flex;
width: 100%
}
div.box {
float: left;
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 30%;
border: 1px solid #cccccc;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
As #Arman Ebrahimi had already mentioned correctly. Use flex box only. The issue of responsibility can be handled well with media queries.
Working example
* {
box-sizing: border-box;
}
div.box-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
gap: 10px;
width: 80%;
margin: 0 auto;
/* or use justify-content: center; */
}
.box {
background-color: #f1f1f1;
padding: 10px;
flex: 30%;
border: 1px solid #cccccc;
word-break: break-word;
height: 326px;
}
#media (max-width: 800px) {
.box {
flex: 100%;
}
}
<div class="box-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
Remove float and only use flex:
* {
box-sizing: border-box;
}
body,
html {
margin: auto;
}
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
}
div.box {
background-color: #ffffff;
padding: 10px;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: calc(100vw / 3);
/*calc(100vw / number of div)*/
border: 1px solid #cccccc;
word-break: break-word;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Use justify-content: center; when you are using flex. This means the flexed contents will always be centered on all screen types.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 33.33%;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Edit ~ add another div, reduce the % the div covers. Demonstrate min-width responsiveness.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 24%;
min-width: 300px;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
I am trying to create three parallel columns of the same width (33.3%) and height (100%). In each column, I want to split it vertically into 80% - 20% ratios. The code below seems straight forward, but I couldn't achieve that. If someone could advise?
Note that I keep the flex and wrap stuff in the inner parts because I will be adding elements into them later. Thanks.
#outer-container {
height: 500px;
width: 100%;
}
#left-container, #mid-container, #right-container {
background-color: #495052;
width: 33.3%;
height: 100%;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
overflow: auto;
}
#left-top-container, #mid-top-container, #right-top-container {
display: flex;
flex-wrap: wrap;
background-color: #495052;
width: 100%;
height: 80%;
overflow: auto;
}
#left-bottom-container, #mid-bottom-container, #mid-bottom-container {
display: flex;
flex-wrap: wrap;
background-color: yellow;
width: 100%;
height: 20%;
border: 1px solid;
border-color: #cae329;
overflow: auto;
}
<div id="outer-container">
<div id="left-container">
<div id="left-top-container">
</div>
<div id="left-bottom-container">
</div>
</div>
<div id="mid-container">
<div id=mid-top-container">
</div>
<div id="mid-bottom-container">
</div>
</div>
<div id="right-container">
<div id="right-top-container">
</div>
<div id="right-bottom-container">
</div>
</div>
</div>
You've got a few typos in your code. Notably a missing quotation mark on one of your ids in your HTML (mid-top-container), and a duplicate rule for #mid-bottom-container instead of #right-bottom-container.
Also, your columns are still display:block, so they will not stay on the same line. I changed them to display: inline-block; to fix that. Their widths should be calc(100% / 3) to make them exactly one third of the width. They need box-sizing: border-box to make the padding/border part of the width figure, and finally, the parent #outer-container needs font-size:0 to remove any white space between the columns.
#outer-container {
height: 500px;
width: 100%;
font-size: 0;
}
#left-container, #mid-container, #right-container {
display: inline-block;
background-color: #495052;
width: calc(100% / 3);
height: 100%;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
overflow: auto;
box-sizing: border-box;
}
#left-top-container, #mid-top-container, #right-top-container {
display: flex;
flex-wrap: wrap;
background-color: #495052;
width: 100%;
height: 80%;
overflow: auto;
}
#left-bottom-container, #mid-bottom-container, #right-bottom-container {
display: flex;
flex-wrap: wrap;
background-color: yellow;
width: 100%;
height: 20%;
border: 1px solid;
border-color: #cae329;
overflow: auto;
}
<div id="outer-container">
<div id="left-container">
<div id="left-top-container">
</div>
<div id="left-bottom-container">
</div>
</div>
<div id="mid-container">
<div id="mid-top-container">
</div>
<div id="mid-bottom-container">
</div>
</div>
<div id="right-container">
<div id="right-top-container">
</div>
<div id="right-bottom-container">
</div>
</div>
</div>
Though there are some Typos. But some un-necessary ids and CSS is also present in the Code.
You may try CSS-GRIDS and Flexbox (in a better way) to achieve the same with much lesser code so that the performance of the app increases.
Have removed all extra selectors.
CODEPEN: https://codepen.io/emmeiWhite/pen/RwGyBLO
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#outer-container {
height: 500px;
display:grid;
grid-template-columns:repeat(3,1fr);
width: 100%;
}
.column-wrapper{
display:flex;
flex-direction:column;
background-color: #495052;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
}
.top-section{
height:80%;
}
<div id="outer-container">
<div class="column-wrapper">
<div class="top-section">
left top
</div>
<div>
bottom
</div>
</div>
<div class="column-wrapper">
<div class="top-section">
mid-top
</div>
<div>
mid-bottom
</div>
</div>
<div class="column-wrapper">
<div class="top-section">
right-top
</div>
<div>
right-bottom
</div>
</div>
</div>
I am trying to create 4 responsive divs for homepage; tried to decreae padding and margin of div not working.divs should be responsive on mobile devices they shpuld move below each one ; two divs appear on tabs; 4 divs on desktop and one div on mobile
i have tried following HTML:
<div class="flex-container">
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn">Practice Now</button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn">Practice Now</button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn">Practice Now</button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn">Practice Now</button>
</div>
</div>
</div>
</div>
here is css divs are not showing properly on tab and mobile devices and i want to decreae the padding and margin:
.homepage-div-shadow
{
padding: 20px;
box-shadow: 2px 2px 8px 1px #cccccc;
border: solid 1px #cccccc;
border-radius: 2px;
}
.homepage-div-icon{
background-image: url("image.png");
width: 100px;
height: 100px;
}
.homepage-div a
{
text-decoration: none;
color: white;
font-size: 16px;
}
.homepage-div h2{
font-size: 28px;
opacity: 0.90;
font-weight: 600;
margin: 5%;
margin-bottom: 6px;
}
.homepage-div h6{
font-size: 17px;
padding: 0px;
margin: 0px;
margin-bottom: 20px;
opacity: 0.6;
}
#media(min-width: 769px) {
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container .flex-item {
flex: 1 0 50%;
}
}
#media (min-width: 1024px) {
.flex-container .flex-item {
flex: 1 0 25%;
}
}
.flex-item-inner {
padding: 25px;
margin: 20px;
background-color: white;
}
Here is the demo link: testfellow
Hope the solution below helps. I have just tried to mimic the scenario where there are a certain number of div s. And as per your question and requirement, have:
1. Followed mobile-first approach.
2. For mobile devices, each div should come in separate lines.
3. For tabs (at your breakpoint: 769px and above), two divs should come in a line.
4. For desktops (at your breakpoint: 1024px and above), four divs should come in a line.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #2980b9;
}
.flex {
max-width: 80%;
}
.flex-item {
background-color: #ffffff;
padding: 5em;
border: 1px solid black;
margin: 2% auto;
width: 25%;
}
#media(min-width: 769px) {
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 50%;
}
}
#media(min-width: 1024px) {
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 25%;
}
}
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item "></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item "></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
I would like to have one image on the left and two on the right stacked on top of one another. As the footprint shrinks, horizontally, I would like the images to become small too, maintaining their aspect ratios. When I currently do it the images maintain their same size and are pushed off the left side of the page.
I am using bootstrap 3.* right now. But I would be curious to know how to do it with flexbox.
codepen
* {
box-sizing: border-box;
}
.content {
background-color: rgba(0, 0, 0, 0.3);
padding: 10px;
}
.row {
display: flex;
flex-flow: column wrap-reverse;
justify-content: center;
align-items: center;
max-width: 600px;
height: 40px;
background-color: rgba(0, 0, 0, .2);
}
.cell {
text-align: center;
display: flex;
align-items: center;
min-height: 50%;
padding-top: 5px;
padding-bottom: 5px;
}
.ordered3 {
order: 3;
flex: 2;
padding-right: 10px;
border-right: rgba(0, 0, 0, 0.3) solid 3px;
}
.ordered2 {
order: 2;
flex: 1;
}
.ordered1 {
order: 1;
flex: 1;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height: 100%
}
<div class="content">
<div class="row">
<div class="cell ordered3">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg" />
</div>
<div class="cell ordered2">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg" />
</div>
<div class="cell ordered1">
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg" />
</div>
</div>
</div>
Check my codeopen. If it's not what you want, please clarify your issue.
* {
box-sizing: border-box;
}
.content {
background-color: #f9f9f9;
border: 1px solid #ececec;
padding: 10px;
}
.row {
display: flex;
align-items: center;
}
.cell {
padding-top: 5px;
padding-bottom: 5px;
}
img {
width: 100%;
display: block;
max-width: 300px;
}
<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
</div>
</div>
</div>
I need to display a questionnaire with multiple sets of options. When there are only two options, they should be displayed in two columns that have 50% width each. When there are more than two, they should be displayed in three columns that have 33.3333% with each. Currently I'm having a difficulty making the columns to 50% width when there are only two of them.
https://codepen.io/sleepydada/pen/Evjgwr
HTML:
<div class="answers">
<div class="answer">first answer</div>
<div class="answer">second answer</div>
</div>
<div class="answers">
<div class="answer">first answer</div>
<div class="answer">second answer</div>
<div class="answer">third answer</div>
<div class="answer">four answer</div>
</div>
SCSS:
* {
box-sizing: border-box;
}
.answers {
border: 2px solid black;
margin-bottom: 20px;
#media (min-width: 480px) {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
&:first-of-type {
background: #ccc;
}
.answer {
width: 100%;
background: crimson;
margin: 20px 0;
border: 1px solid blue;
#media (min-width: 480px) {
flex: 0 0 33.3333%;
}
}
}
Assuming they should wrap when more than 3 items, here is a pretty cool trick using the nth-child selector and target the items based on how many there are.
Their width is set to a default of 33.333% and then when there is only 2 items, the .answers .answer:first-child:nth-last-child(2) kicks in and make them 50%
* {
box-sizing: border-box;
}
.answers {
border: 2px solid black;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.answers:first-of-type {
background: #ccc;
}
.answers .answer {
background: crimson;
margin: 20px 0;
border: 1px solid blue;
flex-basis: 33.333%; /* default width is 33% */
}
.answers .answer:first-child:nth-last-child(2),
.answers .answer:first-child:nth-last-child(2) ~ .answer { /* 2 items */
flex-basis: 50%;
}
<div class="answers">
<div class="answer">first answer</div>
<div class="answer">second answer</div>
</div>
<div class="answers">
<div class="answer">first answer</div>
<div class="answer">second answer</div>
<div class="answer">third answer</div>
<div class="answer">four answer</div>
</div>