使用文本换行和柔性换行的柔性版式
我有一个列有几个项目的垂直列表。每个项目都是用FlexBox制作的两列布局。左列具有固定的宽度。右列包含任意文本，应占用所有可用空间。
当窗口变窄时，我仍然想要一个两列布局。在这里，第二列应该变小，里面的文本应该换行。
当窗口变得更窄时（第二列的大小与第一列大致相同），我希望第二列移动到第一列的下面。
我只是给第一列一个固定的宽度，并在容器上放置flex-wrap:wrap。问题是，当右列中的文本超过一行时，flex-wrap就已经开始了。它“优先于”第二列中的文本换行。
我如何创建上面描述的布局？
我用我的问题创建了一个代码页来玩:https://codepen.io/maxwell89/pen/powrbzj。
null
main {
border: thin solid black;
}
article {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article header {
margin-right: 2em;
width: 5em;
background-color: red;
}
article section {
background-color: blue;
}<body>
<main>
<article>
<header>Header1</header>
<section>iaOIsadjio jiasdj asd you asda sad iaeojrasod aosidjasdjias diojsadiojas oidjasjio dasijod asd</section>
</article>
<article>
<header>Header2</header>
<section>Something short</section>
</article>
</main>
</body>null
尝试调整浏览器窗口的大小，您会发现第一个项目包装得太早了。
共有1个答案
您需要将第二个元素的flex-basis设置为等于第一个元素的宽度。这样做，您将触发包装时，该宽度不能容纳在容器内。
null
main {
border: thin solid black;
}
article {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article header {
margin-right: 2em;
width: 5em;
background-color: red;
}
article section {
background-color: blue;
flex-basis: 5em;
flex-grow: 1;
}<main>
<article>
<header>Header1</header>
<section>iaOIsadjio jiasdj asd you asda sad iaeojrasod aosidjasdjias diojsadiojas oidjasjio dasijod asd</section>
</article>
<article>
<header>Header2</header>
<section>Something short</section>
</article>
</main>-
支持项 支持数据分片后的跨库事务； 支持RC隔离级别； 通过undo快照进行事务回滚； 支持服务宕机后的，自动恢复提交中的事务。 不支持项 不支持除RC之外的隔离级别。 待优化项 Apache ShardingSphere 和 Seata 重复 SQL 解析。
-
整合 Seata AT 事务时，需要将 TM，RM 和 TC 的模型融入 Apache ShardingSphere 的分布式事务生态中。 在数据库资源上，Seata 通过对接 DataSource 接口，让 JDBC 操作可以同 TC 进行远程通信。 同样，Apache ShardingSphere 也是面向 DataSource 接口，对用户配置的数据源进行聚合。 因此，将 DataSourc
-
Seata是阿里集团和蚂蚁金服联合打造的分布式事务框架。 其 AT 事务的目标是在微服务架构下，提供增量的事务 ACID 语意，让开发者像使用本地事务一样，使用分布式事务，核心理念同 Apache ShardingSphere 一脉相承。 Seata AT 事务模型包含TM (事务管理器)，RM (资源管理器) 和 TC (事务协调器)。 TC 是一个独立部署的服务，TM 和 RM 以 jar 包
-
当我们要设计出柔和的色彩组合时，使用没有高度对比的明色，是最明智不过的了。桃色在无言的调色板上传达出诱人、甜美的色彩讯息，非常适合任何场所，无论是在餐厅，展示商品的店里，还是在流行服饰中，这类色彩都展现出可爱、迷人的一面。和紫色、绿色搭配起来，虽然色彩渐趋柔和，但是另一番奇幻的神韵却油然而生，成为一种二次色的配色设计。 居室内的装潢，如果采用这类轻柔、缓和的色彩来设计，往往是非常理想的，因为这类色
-
我有一个flex容器，其中有两个固定尺寸的子容器，它们对齐flex end（父容器的底部）。 当我调整父对象的大小时，我希望它们彼此包裹在一起，但它们各自占据父对象高度的50%。 有没有一种方法可以在不添加另一个div的情况下执行此操作？ 小提琴
-
问题内容： 我们中的许多今天的较旧的值都知道像房地产和新的灵活盒模型后已经过时了CSS3中被引入。但是，我们可能会在同一柔性盒模型中在网络上找到不同的信息。 我们可能会发现主要存在3种不同的值，即财产，和。这三种灵活的盒子模型和使用哪种模型有什么区别？ 问题答案： 您可以使用所需的浏览器来支持所需的浏览器。 Firefox 2.0？（前缀） Chrome 4.0？（前缀） Safari / iOS