css flex 图片 |js 加载css 判断完成

CSS Flex布局是一种流式布局，可以轻松地管理和排列网页上的元素。其中一个常见的应用就是图片排版和布局。下面是一些关于使用CSS Flex布局排列图片的示例和技巧。首先，让大家来看看如何基于CSS Flex布局实现水平和垂直居中的图片。使用Flex布局，大家可以创建一个包含图片的父容器，并将其子元素的flex属性设置为1。同时，使用justify-content和align-items属性来控制子元素的水平和垂直位置。

<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
flex: 1;
}
</style>
<div class="parent">
<img src="image.jpg" class="child" />
</div>

这将使图片在其容器内水平和垂直居中。如果您需要在文字之间嵌入图片，可以使用Flex布局将其与其他内容对齐，并设置最大宽度和高度，以防止它们过度扩张或缩小。例如，以下代码将一个图片和一段文字放在同一个容器中，使它们水平和垂直居中，且图片的最大宽度和高度为200像素。

<style>
.container {
display: flex;
align-items: center;
}
.image {
max-width: 200px;
max-height: 200px;
}
.text {
margin-left: 10px;
}
</style>
<div class="container">
<img src="image.jpg" class="image" />
<p class="text">这里是一段文字</p>
</div>

最后，如果您需要创建一个不规则的图片排版，可以将每张图片包裹在一个子容器中，并使用Flex布局将它们排列成所需的形状和风格。例如，以下代码将六张图片排列为两行三列的网格，且每个包含图片的子容器可以自由地移动和调整大小。

<style>
.grid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.item {
flex: 1;
margin: 5px;
overflow: hidden;
}
</style>
<div class="grid">
<div class="item"><img src="image1.jpg" /></div>
<div class="item"><img src="image2.jpg" /></div>
<div class="item"><img src="image3.jpg" /></div>
<div class="item"><img src="image4.jpg" /></div>
<div class="item"><img src="image5.jpg" /></div>
<div class="item"><img src="image6.jpg" /></div>
</div>

总之，CSS Flex布局是一个强大和灵活的工具，用于排列和布局网页上的元素，包括图片。无论您需要简单的垂直居中，还是复杂的不规则排版，Flex布局都可以帮助您轻松地实现。