代码之家 › 专栏 › 技术社区 › Rutwick Gangurde

灵活布局-文本换行问题,具有2列布局

flexbox layout css

Rutwick Gangurde · 技术社区 · 6 年前

|--标题————内容--|

|--TLE————耳鼻喉科--|

给 flex-wrap: no wrap

display: flex; width: 100%; align-items: flex-start; justify-content: space-between;

如何解决包装问题?

https://jsfiddle.net/njcs30g9/7/ Child 2

1 回复 | 直到 6 年前

londongrammar 6 年前

使用 flex-shrink: 0

flex-shrink .

.parent {
  display: flex;
  width: 100%;
  align-items: flex-start;
}
.child {
    flex-shrink: 0;
}

<div class='parent'>
  <div class='child'>
    <span class='child-l'>Child</span>
    <span class='child-r'>2</span>
  </div>
  
  <div class='content'>
    These are multiple lines of content that expand into 2 lines and breaks the UI.
  </div>
</div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前