使柔性项目采取新行

的100％的宽度我有HTML结构等：使柔性项目采取新行

<div class="container"> 
    <div class="btn-1"></div> 
    <div class="btn-2"></div> 
    <div class="btn-3"></div> 

    <div class="text"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias. 
    </div> 
</div>

BTN-1应被对准到左上角，所有其他按钮（BTN-2，BTN-3 ...）应该与右上角对齐。
所有这些按钮之后的文本应该是100％宽度。

快速样机：

我想通了，第一部分（按钮）有：

.container { 
    display: flex; 
    justify-content: flex-end; 
} 
.btn-1 { 
    /* align first button to the left */ 
    margin-right: auto; 
}

卜不管我做什么，文本不流向下一行...

这是我的JSFiddle https://jsfiddle.net/an0o7taq/

感谢您的帮助！

来源

2017-10-14 Marvin3

边注：汽车保证金就足够了。你不需要'justify-content'。 –

您需要将flex-wrap: wrap添加到容器中。

默认情况下，flex容器设置为flex-wrap: nowrap，强制项目保留在一行上。

revised jsfiddle

规格参考：

5.2. Flex Line Wrapping: the flex-wrap property

来源

2017-10-14 11:49:26

谢谢，这与我所需要的非常接近，但是现在文本与父级的中间对齐 - https://jsfiddle.net/o3ucfbrg/（而不是正下方的按钮）。有没有办法改变这个？我尝试了align-self：flex-start on“text”元素，但它似乎没有帮助。 – Marvin3

这是因为您向容器添加了高度。现在你需要添加'align-content：flex-start'（[revision revision]（https://jsfiddle.net/o3ucfbrg/1/））。 –

[删除多行柔性项目之间的空间（间隙）]（https://stackoverflow.com/q/40890613/3597276） –

你需要用不同的柔性流动和样式的更多容器。提示：学习最重要的柔性道具：align-items，flex-flow，justify-content。它们全部适用于集装箱的直接儿童。所以当你想要你的布局时，你需要更多的容器和不同的弹性流。

本指南对我有所帮助。他们也有很好的例子：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
.header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin-bottom: 20px; 
 
} 
 

 
.header-left, .header-right { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
} 
 

 
.btn { 
 
    width: 40px; 
 
    height: 40px; 
 
    border: 1px solid #ddd; 
 
    background-color: #eee; 
 
} 
 

 
.text { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <div class="header-left"> 
 
     <div class="btn">btn1</div> 
 
    </div> 
 
    <div class="header-right"> 
 
     <div class="btn">btn2</div> 
 
     <div class="btn">btn3</div> 
 
    </div> 
 
    </div> 
 
    <div class="text"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias. 
 
    </div> 
 
</div>

来源

2017-10-14 12:11:21 Daniel

使柔性项目采取新行

回答

相关问题