Why Aren't My Flex Rows Actually Appearing As Separate Rows?
Solution 1:
In a comment you asked, after I answered, how to get the 3 elements in a row using the first example, which is an example based off of the code you posted when asking your question. I updated the answer to reflect how to do it in both examples. The first I kept very very simple. The second I added a bit of JavaScript and style so you have a guide the you can reference when building your own layout. If you need any other updates, or if this is not exactly to the T what you wanted, let me know and Ill update it to reflect the best possible answer for your question.
- 2020 AUGUST 28th
Sorry it took so long to get back to you bud. Before answering this I did some searching and reading on flex and found a bit of w3c.org documentation on the CSS Flex Property that hits right on the subject your asking about, 'how to wrap items a certain way', it even has an example that creates a layout like the one you are asking for.
W3C in my opinion is the only site devs can trust 100%.
To touch on the code example you provided us with. Your code was 100% right, at least as far as achieving the layout you desired. It wasn't so much a matter of what was wrong in your code, as much as it was a matter of what was the code was missing or did not have, that it needed in-order to produce the desired layout in the browser, and the good news is, it only needed a single line of code added. You were off by one CSS property. CSS-Property 'Flex-Flow' was not placed inside the style-sheet's flex-container class. Resulting in the property being set to its default value 'row'. Having changed it to column, it would have produced the result you were looking for, changing the entire layout of the page.
- This is what your flex-container class was missing:
flex-flow: column;
Below are two examples, the first is what your code looks like, cleaned up and fixed using the flex-flow property. The second is a simple HTML/CSS document pair consisting of the way I would go about it. I created one to post an example of using flex in a way the clean precise manner that expresses web standards to the best of my ability.
.flex-container {
flex-flow: column;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
display: flex;
flex-flow: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 250px;
height: 50px;
margin: 4px;
padding: 12px;
border: 1px solid blue;
font-size: 20px;
font-weight: 800;
font-family: Verdana, sans-serif, sans-serif;
color: #048;
}
.rowdiv.a {
width: auto;
}
.rowdiv.b {
width: auto;
margin: 7%;
}
.rowdiv.c {
display: flex;
width: auto;
}
i.fa-check {
display: inline-block;
color: #c33;
font-size: 48px;
}
<htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><scriptsrc="https://kit.fontawesome.com/3d9b68708a.js"crossorigin="anonymous"></script></head><body><divclass="flex-container"><divclass="row"><divclass="a"><iclass="fas fa-check"></i></div><divclass="b"><inputtype="radio"id="radio0"name="choice"></div><divclass="c">SUM TEXT</div></div><divclass="row"><divclass="a"><iclass="fas fa-check"></i></div><divclass="b"><inputtype="radio"id="radio0"name="choice"></div><divclass="c">SUM TEXT</div></div><inputtype="button"value="Submit"id="submitAnswer" /></div></body></html>- Here is the way I would do it personally. This way could easily be made responsive by using @media queries to change the display and flex-flow properties.
functiontoggleCheck(id) {
if (document.getElementById('cbox-' + id).checked) {
document.getElementById('cm-' + id).style.display = 'inline';
} elseif (!document.getElementById('cbox-' + id).checked) {
document.getElementById('cm-' + id).style.display = 'none';
}
}
functionsetCheck() {
toggleCheck('alpha');
toggleCheck('beta');
toggleCheck('gamma');
toggleCheck('delta');
}
window.onload = () => { setCheck(); };
/*______________________________________
* CSS DOCUMENT: STACKOVERFLOW_CSS
* DATE CREATED: 2020 - AUGUST - 28th
* CREATED BY: SO User, Aft3rL1f3
----------------------------------------*/@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
body {
width: 100vw;
margin: 0;
padding: 0;
background-color: #d4d4d4;
}
i.fa-check {
display: none;
color: #c33;
font-size: 42px;
}
input[type='submit'] {
width: 112px;
margin: 12px;
padding: 6px;
font-family: 'Lucida Sans Unicode' Arial, sans-serif;
font-weight: 600;
font-size: 19px;
color: #1fc;
border: 4px outset #1de;
background-color: #026;
border-radius: 7px;
}
form.flex-container {
display: flex;
flex-flow: column;
margin: 12px;
background: #f8f8e8;
border: 2px dotted #bbb;
align-items: center;
}
.flex-row {
display: flex;
flex-flow: nowrap;
margin: 2px0;
padding: 8px;
background-color: #e0ffe0;
border: 1px dashed #bbb;
align-items: center;
}
.box {
display: flex;
flex-wrap: nowrap;
margin: 05px;
width: 200px;
padding: 12px8px;
line-height: 40px;
text-align: center;
border: 1px solid #04a;
border-radius: 6px;
background-color: #e8e8ff;
color: #04a;
font-size: 26px;
font-family: 'Kalam', sans-serif;
font-weight: 600;
}
div.box.a {
height: 48px;
width: 30%;
margin: 0;
}
div.box.b {
height: 48px;
width: 20%;
margin: 0;
}
div.box.c {
height: 48px;
width: 50%;
margin: 0;
}<!DOCTYPE html><htmllang="en"><head><!--
<-------------------------------------------~>
>> HTML DOCUMENT: STACKOVERFLOW_HTML
>> DATE CREATED: 2020 - AUGUST - 28th
>> UPDATED ON: 2020 - AUGUST - 29th
>> CREATED BY: SO User Aft3rL1f3
<--------------------------------------------><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><scriptsrc="https://kit.fontawesome.com/3d9b68708a.js"crossorigin="anonymous"></script><linktype="text/css"href="/style/so.css"></head><body><formclass="flex-container"action="/process-form.php"method="post"><divclass="flex-row"><!----( Box Alpha )----><divid='alpha'class="box"><divclass="a"><iid="cm-alpha"class="fas fa-check"></i></div><divonclick="toggleCheck('alpha')"class="b"><inputid="cbox-alpha"name="alpha"type="checkbox"></div><divclass="c"> ALPHA </div></div><!----( Box Beta )----><divid='beta'class="box"><divclass="a"><iid="cm-beta"class="fas fa-check"></i></div><divonclick="toggleCheck('beta')"class="b"><inputid="cbox-beta"name="beta"type="checkbox"></div><divclass="c"> BETA </div></div></div><divclass="flex-row"><!----( Box Gamma )----><divid='gamma'class="box"><divclass="a"><iid="cm-gamma"class="fas fa-check"></i></div><divonclick="toggleCheck('gamma')"class="b"><inputid="cbox-gamma"name="gamma"type="checkbox"></div><divclass="c"> GAMMA </div></div><!----( Box Delta )----><divid='delta'class="box"><divclass="a"><iid="cm-delta"class="fas fa-check"></i></div><divonclick="toggleCheck('delta')"class="b"><inputid="cbox-delta"name="delta"type="checkbox"></div><divclass="c">DELTA</div></div></div><inputtype="submit"value="SUBMIT"></form></body></html>Solution 2:
Can you provide a screenshot of the desired output, please? Also, I was able to achieve this result by making few changes am not sure if this is the result you wanted... But I hope it can be of any help.
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
}
.flex-item {
margin: 10px30px;
padding: 5px;
line-height: 36px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
align-items: center;
}
.flex-itemimg {
display: block;
margin: 0 auto;
}
.second-flex {
display: flex;
}<divclass="flex-container"><divclass="row"><divclass="flex-item"><imgsrc="https://picsum.photos/40" /></div><divclass="flex-item"><inputtype="radio"id="radio0"name="choice"><span>Text1</span></div></div><divclass="row second-flex"><divclass="flex-item"><imgsrc="https://picsum.photos/40" /></div><divclass="flex-item"><inputtype="radio"id="radio1"name="choice"><span>Text2</span></div></div><divclass="row"><inputtype="button"value="Submit"id="submitAnswer" /></div></div>Is this the result you are looking for? if not please provide me an image and I will adjust the code according to it. And I will try my best to help you out.
Edited
So to make them appear on a different row give the .flex-item class the following properties. display: flex; flex-direction: column;
I left the .flex-item with the **text2** as it is so you can see the difference between them.
PS: you can download an extension called Pesticide for Chrome it will draw an outline for each element on the page it makes designing easier.
**
EDITED
** Ok, So which one do you really want from these? Option one:
CSS:
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.row {
width: auto;
}
.flex-item {
margin: 10px30px;
padding: 5px;
line-height: 36px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
align-items: center;
}
.flex-itemimg {
display: block;
margin: 0 auto;
}
.second-flex {
display: flex;
}
HTML:
<div class="flex-container">
<divclass="row"><divclass="flex-item"><imgsrc="assets/images/image.jpg"height="40" /></div><divclass="flex-item third-flex"><inputtype="radio"id="radio0"name="choice"><span>Text1</span></div></div><divclass="row second-flex"><divclass="flex-item"><imgsrc="assets/images/image.jpg"height="40" /></div><divclass="flex-item"><inputtype="radio"id="radio1"name="choice"><span>Text2</span></div></div><divclass="row"><inputtype="button"value="Submit"id="submitAnswer" /></div></div>Option Two:
It has the same CSS as option one. HTML changes:
<div class="flex-container">
<divclass="row second-flex"><divclass="flex-item"><imgsrc="assets/images/image.jpg"height="40" /></div><divclass="flex-item third-flex"><inputtype="radio"id="radio0"name="choice"><span>Text1</span></div></div><divclass="row second-flex"><divclass="flex-item"><imgsrc="assets/images/image.jpg"height="40" /></div><divclass="flex-item"><inputtype="radio"id="radio1"name="choice"><span>Text2</span></div></div><divclass="row"><inputtype="button"value="Submit"id="submitAnswer" /></div></div>Option three:
This one has the same HTML and CSS as option 2 but with a small change in CSS
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
/* flex-direction: column; remove this line */
}
option four:
HTML:
<div class="flex-container">
<divclass="row "><divclass="flex-item"><imgsrc="assets/images/image.jpg"height="40" /></div><divclass="flex-item third-flex"><inputtype="radio"id="radio0"name="choice"><span>Text1</span></div></div><divclass="row "><divclass="flex-item"><imgsrc="assets/images/image.jpg"height="40" /></div><divclass="flex-item"><inputtype="radio"id="radio1"name="choice"><span>Text2</span></div></div><divclass="row"><inputtype="button"value="Submit"id="submitAnswer" /></div></div>CSS
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
}
.flex-item {
margin: 10px30px;
padding: 5px;
line-height: 36px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
.flex-itemimg {
display: block;
margin: 0 auto;
}
.second-flex {
display: flex;
}
option 5:
HTML:
<div class="flex-container">
<divclass="row "><divclass="flex-item"><imgsrc="assets/images/image.jpg"height="40" /></div><divclass="flex-item third-flex"><inputtype="radio"id="radio0"name="choice"><span>Text1</span></div></div><divclass="row "><divclass="flex-item"><imgsrc="assets/images/image.jpg"height="40" /></div><divclass="flex-item"><inputtype="radio"id="radio1"name="choice"><span>Text2</span></div></div><divclass="row"><inputtype="button"value="Submit"id="submitAnswer" /></div></div>CSS:
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.row {
width: auto;
}
.flex-item {
margin: 10px30px;
padding: 5px;
line-height: 36px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
.flex-itemimg {
display: block;
margin: 0 auto;
}
.second-flex {
display: flex;
}
Solution 3:
I think you're just missing wrap on the container.
An initial setting in flex layout is flex-wrap: nowrap. This means flex items will not wrap. They will always line up in a single row.
You can override that default with flex-wrap: wrap.
Try something like this:
body {
display: flex;
justify-content: center;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.row {
flex-basis: 100%;
text-align: center;
border: 1px solid blue;
}
.flex-item {
padding: 5px;
margin: 10px;
font-weight: bold;
font-size: 2em;
}<divclass="flex-container"><divclass="row"><divclass="flex-item"><imgsrc="http://i.imgur.com/60PVLis.png"width="50"height="50"alt=""></div><divclass="flex-item"><inputtype="radio"id="radio0"name="choice"><span>Text1</span></div></div><divclass="row"><divclass="flex-item"><imgsrc="http://i.imgur.com/60PVLis.png"width="50"height="50"alt=""></div><divclass="flex-item"><inputtype="radio"id="radio1"name="choice"><span>Text2</span></div></div><divclass="row"id="feedback"></div><divclass="row"><inputtype="button"value="Submit"id="submitAnswer" /></div></div>More info: Force flex item to span full row width
Solution 4:
Simply follow this:
When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.
The item now consumes all available space. Siblings are forced on to other rows.
From the following question/answer:
Solution 5:
I'm guessing that you want each option to take a whole row? If not, please post the expected layout in question.
If Yes, you can add flex-direction: column to the flex-container
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
flex-direction: column;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
display: flex;
width: auto;
border: 1px solid blue;
}
.flex-item {
padding: 5px;
margin: 10px;
line-height: 20px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
}<divclass="flex-container"><divclass="row"><divclass="flex-item"><imgsrc="images/check.jpg" /></div><divclass="flex-item"><inputtype="radio"id="radio0"name="choice" ><span>Text1</span></div></div><divclass="row"><divclass="flex-item"><imgsrc="images/check.jpg" /></div><divclass="flex-item"><inputtype="radio"id="radio1"name="choice" ><span>Text2</span></div></div><divclass="row"id="feedback"></div><divclass="row"><inputtype="button"value="Submit"id="submitAnswer" /></div></div>
Post a Comment for "Why Aren't My Flex Rows Actually Appearing As Separate Rows?"