Question

我希望问题在左侧的宽列中，而答案的选择都在右侧的细列中。我对Flexbox还是很陌生，并且整天都在学习/搜索它，但是找不到适合自己的解决方案。

我的表格在出现某些问题之前也有一些情况，我也希望将其保留在左栏中，但是我仍然需要答案来回答相应的问题。

我查看了诸如this和this之类的链接，但找不到解决问题的好方法。

我还查看了CSS align one item right with flexbox和Creating a two column layout with flexbox这样的问题。

<p>Example Situation</p>

<p id="question1">Question 1</p>

<input type="radio" name="question1" id="yes1" value="yes">
<label for="yes1">Yes</label>
<input type="radio" name="question1" id="no1" value="no">
<label for="no1">No</label>

<p id="question2">Question 2</p>

<input type="radio" name="question2" id="yes2" value="yes">
<label for="yes2">Yes</label>
<input type="radio" name="question2" id="no2" value="no">
<label for="no2">No</label>

Answer 1

是否有任何理由使+incdir+元素无法完成您尝试做的事情？问题/答案的结构似乎很适合使用。

<table>

table {
width:100%;
}
tr:first-child {
width:60%;
}

Answer 2

已经勾勒出我认为您可以使用flexbox做到的事情。

问题部分将占用尽可能多的空间，而答案部分具有固定的宽度。

不幸的是，不可能确保两个独立列之间的水平对齐，因此必须为每个答案/问题对创建一行。

可以建议您寻找一个库来简化flexbox的使用。例如，一直在使用angularjs material，请确保还有其他针对特定框架的选择。

.qa {
  display: flex;
  flex-direction: row;
}

.question {
  flex-grow: 100;
  align-self: center;
  background: red;
}

.answer {
  flex: none;
  align-self: center;
  min-width: 200px;
  background: blue;
}

@media (max-width: 600px) {
  .qa {
    flex-direction: column;
  }
  .question {
    align-self: flex-start;
  }
  .answer {
    flex: 0 1 auto;
    align-self: flex-start;
  }
}

<div class="qa">
  <div class="question">
    <p id="question1">Question 1</p>
  </div>
  <div class="answer">
    <input type="radio" name="question1" id="yes1" value="yes">
    <label for="yes1">Yes</label>
    <input type="radio" name="question1" id="no1" value="no">
    <label for="no1">No</label>
  </div>
</div>
<div class="qa">
  <div class="question">
    <p id="question2">Question 2</p>
  </div>
  <div class="answer">
    <input type="radio" name="question2" id="yes2" value="yes">
    <label for="yes2">Yes</label>
    <input type="radio" name="question2" id="no2" value="no">
    <label for="no2">No</label>
  </div>
</div>

编辑：添加了@media查询以展示响应能力

https://jsfiddle.net/ojky49rb/1/

如何使用Flexbox创建问题/答案列？

2 个答案: