Why aren't my flex rows actually appearing as separate rows?

0

Issue

I’m trying to get a handle on flex containers (from here — Flexbox: center horizontally and vertically ) in order to create rows of radio buttons and their text in a larger DIV. So I have these classes …

.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;
    border: 1px solid blue;
}
.flex-item {
    padding: 5px;
    margin: 10px;
    line-height: 20px;
    color: black;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

and applied it to these items …

<div class="flex-container">
    <div class="row">
        <div class="flex-item">
          <img src="images/check.jpg" />
        </div>
        <div class="flex-item">
          <input type="radio" id="radio0" name="choice" ><span>Text1</span>
        </div>
    </div>
    <div class="row">
        <div class="flex-item">
          <img src="images/check.jpg" />
        </div>
        <div class="flex-item">
        <input type="radio" id="radio1" name="choice" ><span>Text2</span>
        </div>
    </div>
    ...
    <div class="row" id="feedback"></div>
    <div class="row">
        <input type="button" value="Submit" id="submitAnswer" />
    </div>
</div>

But oddly what the rows marked with the class "row" are not appearing as their own rows …

enter image description here

What else do I need to adjust in my flex container to make the horizontal rows appear on separate lines?

Solution

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;
        }

        .row div.a {
            width: auto;
        }

        .row div.b {
            width: auto;
            margin: 7%;
        }

        .row div.c {
            display: flex;
            width: auto;
        }

        i.fa-check {
            display: inline-block;
            color: #c33;
            font-size: 48px;
        }
    
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script  data-src="https://kit.fontawesome.com/3d9b68708a.js" crossorigin="anonymous"></script>
</head>

<body>

    <div class="flex-container">
        <div class="row">
            <div class="a"><i class="fas fa-check"></i></div>
            <div class="b"><input type="radio" id="radio0" name="choice"></div>
            <div class="c">SUM TEXT</div>
        </div>

        <div class="row">
            <div class="a"><i class="fas fa-check"></i></div>
            <div class="b"><input type="radio" id="radio0" name="choice"></div>
            <div class="c">SUM TEXT</div>
        </div>

        <input type="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.
        function toggleCheck(id) {
            if (document.getElementById('cbox-' + id).checked) {
                document.getElementById('cm-' + id).style.display = 'inline';
            } else if (!document.getElementById('cbox-' + id).checked) {
                document.getElementById('cm-' + id).style.display = 'none';
            }
        }

        function setCheck() {
            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: 2px 0;
    padding: 8px;
    background-color: #e0ffe0;
    border: 1px dashed #bbb;
    align-items: center;
}

.box {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 5px;
    width: 200px;
    padding: 12px 8px;
    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>
<html lang="en">

<head>
    <!--
<-------------------------------------------~>
  >> HTML DOCUMENT: STACKOVERFLOW_HTML
  >> DATE CREATED: 2020 - AUGUST - 28th
  >> UPDATED ON: 2020 - AUGUST - 29th
  >> CREATED BY: SO User Aft3rL1f3
<-------------------------------------------->
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/3d9b68708a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="/style/so.css">
</head>

<body>

    <form class="flex-container" action="/process-form.php" method="post">
        <div class="flex-row">


            <!----( Box Alpha )---->
            <div id='alpha' class="box">
                <div class="a"><i id="cm-alpha" class="fas fa-check"></i></div>

                <div onclick="toggleCheck('alpha')" class="b">
                    <input id="cbox-alpha" name="alpha" type="checkbox">
                </div>

                <div class="c"> ALPHA </div>
            </div>


            <!----( Box Beta )---->
            <div id='beta' class="box">
                <div class="a"><i id="cm-beta" class="fas fa-check"></i></div>

                <div onclick="toggleCheck('beta')" class="b">
                    <input id="cbox-beta" name="beta" type="checkbox">
                </div>

                <div class="c"> BETA </div>
            </div>


        </div>
        <div class="flex-row">


            <!----( Box Gamma )---->
            <div id='gamma' class="box">
                <div class="a"><i id="cm-gamma" class="fas fa-check"></i></div>

                <div onclick="toggleCheck('gamma')" class="b">
                    <input id="cbox-gamma" name="gamma" type="checkbox">
                </div>

                <div class="c"> GAMMA </div>
            </div>


            <!----( Box Delta )---->
            <div id='delta' class="box">
                <div class="a"><i id="cm-delta" class="fas fa-check"></i></div>

                <div onclick="toggleCheck('delta')" class="b">
                    <input id="cbox-delta" name="delta" type="checkbox">
                </div>
                <div class="c">DELTA</div>
            </div>

        </div>

      <input type="submit" value="SUBMIT">
    </form>

</body>
</html>

Answered By – JΛYÐΞV

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More