为什么我的flex行实际上没有显示为单独的行? [英] Why aren't my flex rows actually appearing as separate rows?

查看：38 发布时间：2020/11/8 20:03:58 html css flexbox

本文介绍了为什么我的flex行实际上没有显示为单独的行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试处理Flex容器(从这里开始- Flexbox:居中水平和垂直)，以便在更大的DIV中创建单选按钮行及其文本.所以我有这些课程...

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>

但是奇怪的是，标有"row"类的行是什么?没有显示为自己的行...

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

我还需要在flex容器中进行哪些调整，以使水平行显示在单独的行上?

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

推荐答案

在您回答的一条评论中，我回答完后，如何使用第一个示例(这是基于代码的示例)如何连续获取3个元素您在提问时发帖.我更新了答案以反映如何在两个示例中都做到这一点.首先，我保持非常非常简单.第二个我添加了一些JavaScript和样式，因此您有了一个指南，可以在构建自己的布局时参考该指南.如果您需要任何其他更新，或者这与您想要的T不完全相同，请告知我，我将对其进行更新，以反映出您问题的最佳答案.

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年8月28日

很抱歉，花了很长时间才回复您的芽. 在回答这个问题之前，我在flex上进行了一些搜索和阅读，并在CSS Flex属性上找到了一些w3c.org文档，该文档恰好符合您所问的主题:如何以某种方式包装物品"，它甚至有一个示例可以创建您想要的布局.

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是唯一一个网站开发人员可以100％信任的网站.

W3C in my opinion is the only site devs can trust 100%.

W3C Overview of Flex
Flex Layout Box Model and Terminology

要触摸您提供给我们的代码示例.您的代码是100％正确的，至少要达到所需的布局.这与代码中的错误无关，而与代码缺失或不相关的问题无关，它需要按顺序才能在浏览器中生成所需的布局，好消息是，只需要添加一行代码即可.您被一个CSS属性所吸引. CSS属性"Flex-Flow"未放置在样式表的flex-container类内.结果将该属性设置为其默认值行".将其更改为专栏后，它会产生您想要的结果，从而更改页面的整个布局.

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.

这是您的flex容器类所缺少的:

    flex-flow: column;

下面是两个示例，第一个是代码的外观，使用flex-flow属性对其进行清理和修复.第二个是一个简单的HTML/CSS文档对，由我将要处理的方式组成.我创建了一个示例，以使用flex的示例来发布，该示例以一种尽力而为的方式精确，清晰地表达了Web标准.

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

这是我个人要做的方式.通过使用@media查询来更改显示和弹性流属性，可以轻松地使这种方法具有响应性.

        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>

这篇关于为什么我的flex行实际上没有显示为单独的行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

为什么我的flex行实际上没有显示为单独的行? [英] Why aren't my flex rows actually appearing as separate rows?

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

为什么我的flex行实际上没有显示为单独的行? [英] Why aren&#39;t my flex rows actually appearing as separate rows?

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

为什么我的flex行实际上没有显示为单独的行? [英] Why aren't my flex rows actually appearing as separate rows?

登录关闭