display flex 换行（css中flex布局导致容器中图片被压缩问题）

：暂无数据 2026-08-30 05:20:01 ：2

其实display flex 换行的问题并不复杂，但是又很多的朋友都不太了解css中flex布局导致容器中图片被压缩问题，因此呢，今天小编就来为大家分享display flex 换行的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

本文目录

css中flex布局导致容器中图片被压缩问题
DIV+CSS样式，li自动适应高度，自动换行，横向排列
flex布局最后一列，文字撑满换行

css中flex布局导致容器中图片被压缩问题

图中：头像、“账号名称”，“具体名称内容”是一个容器内的三部分，给容器设置`display:flex`，时，如果“具体名称内容”字数过多，出现换行，会导致图片宽度被压缩，页面成为如下样子：
为了防止图片被压缩，可以给图片容器设置`flex-shrink: 0;`，只有不为0的元素才会被压缩。

DIV+CSS样式，li自动适应高度，自动换行，横向排列

HTML部分：

《div id="nav"》

《ul》

《li》AAAA《/li》

《li》BBBB《/li》

《li》CCCC《/li》

《li》DDDD《/li》

《li》EEEE《/li》

《li》FFFF《/li》

《/ul》

《/div》

css部分：

#nav{

margin: 0 auto;

border: 2px solid #00CED1;

}

ul,li {

margin: 0px;

padding: 0px;

list-style: none;

}

ul{

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

li{

border: 1px solid;

width: 100px; /*每个元素的初始化宽度*/

text-align: center;

margin-top: 10px;

margin-bottom: 10px;

flex:auto; /*这是关键*/

}

扩展资料：

Flex是Flexible Box的缩写，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

main start/main end：主轴开始位置/结束位置；

cross start/cross end：交叉轴开始位置/结束位置；

main size/cross size：单个项目占据主轴/交叉轴的空间；

设置在容器上的属性有6种。

flex-direction

flex-wrap

flex-flow

justify-content

align-item

align-content

overflow: hidden;

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 1;
下面是使用
.one-line-title{

overflow: hidden;

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 1;

}

.order-item {

display: flex;

width: calc(100%);

background-color: #ffffff;

align-items: center;

padding-left: 12px;

padding-right: 8px;

margin-bottom: 25px;

}
《view class="order-item" v-for="(item, index) in flowList" :key="index"》

《u-checkbox @change="checkboxChange" shape="circle" active-color="#D2A36C" v-model="item.checked"》

《/u-checkbox》

《view style="margin-start:9px; width: 80px;height: 80px"》

《image :src="item.image" style="width: 80px;height: 80px" :index="index"》《/image》

《/view》

《view style="margin-left: 10px;"》

《view class="one-line-title"》{{ item.description }}《/view》

《view class="sku-layout"》

《view class="sku-title"》颜色：红色尺寸：L《/view》

《view class="money"》¥138.00《/view》

《/view》

《view class="sku-layout"》

《view class="delivery"》未发货《/view》

《view class="num"》x1《/view》

《/view》

《/view》

《/view》