Question

我试图在一个flex容器中创建一行两列的布局。这是代码http://jsfiddle.net/73574emn/1/。

我想要的是让行始终保持在列之上，并且两列都保持在同一行。显然，现在如果我使窗口太小，那么column3将在column2下向下移动，因为flex-wrap属性设置为wrap（因为我需要行和列在不同的行上）。

我想我可以将行包装在一个弹性容器中，将两列放在另一个容器中，但是我想知道当它们在同一个容器中时是否有任何方法可以做到这一点，如果是的，它是如何工作的。也许我可以做宽度或最小宽度的事情？

＆＃13;

*
{
    box-sizing: border-box;
}

.flex
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.row {
  background-color: green;
  flex: 0 1 100%;
}

.column1 {
  background-color: red;
  flex: 1 0 50%;
  text-align: center;
  padding: 10px;
}

.column2 {
  background-color: yellow;
  flex: 1 0 50%;
  text-align: center;
  padding: 10px;
}

＆＃13;

<div class="flex">
    <div class='row'>Hithis is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
    <div class='column1'>Hellothis is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
    <div class='column2'>Hello 2this is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
</div>

＆＃13;

Answer 1

弹性项目的min-width默认为auto，因此不允许该元素小于其内容。

将overflow: hidden添加到并排列中，它们将不会换行

Updated fiddle

.flex > div
{
   flex: 1 0 50%;
   text-align: center;
   padding: 10px;
   overflow: hidden;
}

另一种方法是使用min-width: 0，但这可能会导致内容溢出

.flex > div
{
   flex: 1 0 50%;
   text-align: center;
   padding: 10px;
   min-width: 0;
}

Answer 2

只需删除弹性基础值

更改

flex:1 0 50%;

要

flex:1 0;

然后将宽度添加到列

width:50%;

以下是示例：

*
{
    box-sizing: border-box;
}

.flex
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.row {
  background-color: green;
  flex: 0 1 100%;
}

.column1 {
  background-color: red;
  flex: 1 0;
  text-align: center;
  padding: 10px;
  width:50%;
}

.column2 {
  background-color: yellow;
  flex: 1 0;
  text-align: center;
  padding: 10px;
  width:50%;
}

<div class="flex">
    <div class='row'>Hithis is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
    <div class='column1'>Hellothis is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
    <div class='column2'>Hello 2this is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
</div>

如果容器“柔性包裹”，如何强制柔性柱保持在同一条线上。设置为＆＃39; wrap＆＃39;

2 个答案: