小编Jas*_*Coy的帖子

Flexbox与同一容器内的图像和文本对齐

我正在制作一个flexbox员工ID卡布局.员工的图片将显示在左侧,员工的信息(姓名,员工ID,部门等)将以从上到下的列表格式显示在图像的右侧.

我需要使用flexbox来做到这一点.

这是我到目前为止所做的JSFiddle链接:

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
   
  flex-wrap: wrap;
  min-width: 320px;
  max-width: 1220px;
}
.flex-item {
  height: 120px;
  width: 300px;
  background-color: #e46119;
  border: 1px solid #626262;
  margin: 3px;
  padding: 10px 0 0 10px;
}
span {
  padding-left: 5px;
}
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf

任何和所有的帮助将不胜感激.谢谢你,杰森

html css layout flexbox

13
推荐指数
2
解决办法
3万
查看次数

标签 统计

css ×1

flexbox ×1

html ×1

layout ×1