Css 将图像和文本与flex容器项中的类对齐

我正在尝试用css flex创建自己的基本网格系统。我想在flex项目容器中使用类进行文本和图像对齐

我需要帮助了解做这件事的最佳方法

这就是我目前拥有的：

.flex页脚{
显示器：flex；
柔性流：行换行；
证明内容：中心；
背景色：#330066；
}
.项目{
高度：100px；
填充物：5px；
保证金：5px；
背景：番茄；
}
.flex footer>.item>div{
显示：表格；
}
.中心{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.item>.bottom center{
自对准：柔性端；
/*显示：表格单元格*/
/*垂直对齐：底部对齐*/
/*弯曲方向：立柱*/
/*对齐项目：柔性端*/
/*自对准：柔性端*/
/*对齐内容：柔性端*/
/*证明内容：中心*/
}
.order-1{order:1；}
.order-2{order:2；}
.order-3{order:3；}
.col-4{
宽度：25%；
}

文本（左上）a
文本（左中）
文本（左下角）
文本（中间居中）
文本（右上角）
图像（中间）
ul/litext

您需要将

显示：flex

添加到所有

项中

以下是我理解您想要做的事情，以及flex如何做到这一点的一些示例

.item
中的
边距
使项目变得比
.flex footer
的宽度大。我很少在flex元素中使用边距，因为我需要在设置
flex basis
时考虑这一点（使用
calc（）
）。遗憾的是，flex容器中没有考虑利润


.flex页脚{
显示器：flex；
柔性流：行换行；
证明内容：中心；
背景色：#330066；
}
.项目{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
高度：100px；
填充物：5px；
保证金：5px；
框大小：边框框；/*以在元素的宽度中包含填充*/
背景：番茄；
}
.项目.订单-2{
弯曲方向：行反向；
}
.项目.订单-3{
对正内容：左；
}
/*.flex footer>.item>div{
显示：表格；
}*/
.顶{
对齐自我：开始；
}
.中{
自对准：居中；
}
.底部{
自我对齐：结束；
}
.order-1{order:1；}
.order-2{order:2；}
.order-3{order:3；}
.col-4>分区{
弹性基准：25%；
/*宽度：25%*/
}

文本（左上）a
文本（左中）
文本（左下角）
文本（中间居中）
文本（右上角）
图像（中间）
ul/litext
@Jackson感谢您的编辑。我的英语不擅长语法句子。您是如何制作代码段的？如果你解释或者你发送了一个解释信息页面的链接，我可以用它来回答我接下来的问题。你应该把你的问题缩小到一个特定的问题。正如现在所说的，有太多的“如果有的话”变量要考虑清楚或concise@webmaster见：