通过flexbox实现android Linearlayout权重效果
我想通过flexbox实现以下android布局。通过flexbox实现android Linearlayout权重效果,android,css,flexbox,Android,Css,Flexbox,我想通过flexbox实现以下android布局。 android布局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
android布局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>
您需要添加
最小宽度:0编码>到.vertical
元素
<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>
.集装箱{
宽度:400px;
高度:200px;
显示器:flex;
弯曲方向:行;
对齐项目:居中;
背景:水鸭;
}
.垂直{
显示器:flex;
最小宽度:0;
弹性:1;
弯曲方向:立柱;
}
p{
文本溢出:省略号;
空白:nowrap;
溢出:隐藏;
}
.按钮{
宽度:100px;
高度:50px;
背景:红色;
}
TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
这个问题与文本在flexbox子对象中的包装方式有关
此处的更多信息:为什么不添加宽度?如果你不想修复它,就给它100%。
<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>