flex示例，文字显示，图片居中css

hello oneday

已于 2024-04-09 17:54:42 修改

阅读量125

点赞数 2

文章标签： css html 前端

于 2024-04-09 14:04:15 首次发布

本文链接：https://blog.csdn.net/weixin_44732049/article/details/137549731

版权


text {
			font-size: 14px;
				color: white;
				display: inline-block;
				width: 90%;
				white-space: normal;
				word-break: break-all; //英文分段
		//		normal	使用浏览器默认的换行规则。
//break-all	允许在单词内换行。
//keep-all	只能在半角空格或连字符处换行。
			}

浮动

/* 为最后一行添加伪元素以确保间隔 */  

.container::after {  
  content: '';  
  //flex-basis: 1;
  flex-basis: calc(33.333% - 20px); /* 与.item相同的基础宽度 */  
  width: 0; /* 不实际占用空间 */  
  visibility: hidden; /* 不可见 */  
  order: 999; /* 确保它在所有真实元素之后 */  
}
.parent{
				width: 100%;
				flex-wrap: wrap;
				display: flex;
				flex-direction: row;
				// justify-content: space-around;
				// justify-content: space-evenly;
				justify-content: space-between;
				box-sizing: border-box;

}
//设置图片居中显示
	image {
			// width: 100%;
			display: block;
			border-radius: 8px;
			margin: auto;
		}

参考示例
flex
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Flexbox Example</title>
		<style>
			.flex-container {
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 20rpx 0;
				padding: 0 20rpx;
				flex-wrap: wrap;
				justify-content: space-between;
				box-sizing: border-box;
			}

			.flex-item {
				width: 300px;
				flex: 1 1 200rpx;
				/* Flex-grow, flex-shrink, flex-basis */
				margin: 10rpx;
				padding: 20rpx;
				background-color: #f2f2f2;
				border: 1rpx solid #ccc;
				box-sizing: border-box;
				text-align: center;
			}
		</style>
	</head>
	<body>

		<div class="flex-container">
			<div class="flex-item">Item 1</div>
			<div class="flex-item">Item 2</div>
			<div class="flex-item">Item 3</div>
			<div class="flex-item">Item 4</div>
			<div class="flex-item">Item 5</div>
			<div class="flex-item">Item 6</div>
			<div class="flex-item">Item 1</div>
			<div class="flex-item">Item 2</div>
			<div class="flex-item">Item 3</div>
			<div class="flex-item">Item 4</div>
			<div class="flex-item">Item 5</div>
			<div class="flex-item">Item 6</div>
			<div class="flex-item">Item 1</div>
			<div class="flex-item">Item 2</div>
			<div class="flex-item">Item 3</div>
			<div class="flex-item">Item 4</div>
			<div class="flex-item">Item 5</div>
			<div class="flex-item">Item 6</div>
			<div class="flex-item">Item 1</div>
			<div class="flex-item">Item 2</div>
			<div class="flex-item">Item 3</div>
			<div class="flex-item">Item 4</div>
			<div class="flex-item">Item 5</div>
			<div class="flex-item">Item 6</div>
			<div class="flex-item">Item 1</div>
			<div class="flex-item">Item 2</div>
			<div class="flex-item">Item 3</div>
			<div class="flex-item">Item 4</div>
			<div class="flex-item">Item 5</div>
			<div class="flex-item">Item 6</div>
			<div class="flex-item">Item 1</div>
			<div class="flex-item">Item 2</div>
			<div class="flex-item">Item 3</div>
			<div class="flex-item">Item 4</div>
			<div class="flex-item">Item 5</div>
			<div class="flex-item">Item 6</div>
			<!-- Add more items as needed to see wrapping -->
		</div>

	</body>
</html>