通过flexbox实现android Linearlayout权重效果 [英] Implement the android Linearlayout weight effect via flexbox
本文介绍了通过flexbox实现android Linearlayout权重效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想通过flexbox实现下面的android布局.
android布局xml:
I want to implement the android layout bellow via flexbox.
android layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="400px"
android:layout_height="200px"
android:background="#0ee"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:text="TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:text="TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT"/>
</LinearLayout>
<View
android:layout_width="100px"
android:layout_height="50px"
android:background="@color/red" />
</LinearLayout>
效果:
如何更改下面的代码以达到上述效果?
ps:如果我指定了vertical类的宽度，它可以工作，还有另一种方法可以实现吗?
How to change the code below to achieve the effect above?
ps: If I specified the width of the vertical class, it works, is there another way to achieve this?
<html>
<header>
<style>
.container {
width: 400px;
height: 200px;
display: flex;
flex-direction: row;
align-items: center;
background: teal;
}
.vertical {
display: flex;
/* width: 100px; I don't want to specify the width*/
flex: 1;
flex-direction: column;
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.button {
width: 100px;
height: 50px;
background: red;
}
</style>
</header>
<body>
<div class="container">
<div class="vertical">
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
</div>
<div class="button">
</div>
</div>
</body>
</html>
推荐答案
您需要将min-width: 0;添加到.vertical元素
You need to add min-width: 0; to the .vertical element
<html>
<header>
<style>
.container {
width: 400px;
height: 200px;
display: flex;
flex-direction: row;
align-items: center;
background: teal;
}
.vertical {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.button {
width: 100px;
height: 50px;
background: red;
}
</style>
</header>
<body>
<div class="container">
<div class="vertical">
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
</div>
<div class="button">
</div>
</div>
</body>
</html>
https://codepen.io/withn/pen/RwwOmKm
问题与在flexbox子代中包装文本的方式有关.
The issue has to do with the way text is wrapped in flexbox children.
此处的更多信息: https://css-tricks.com/flexbox-truncated-文字/
这篇关于通过flexbox实现android Linearlayout权重效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
