flexbox创建对齐中心内部项目失败

时间：2018-01-29 12:02:49

标签： css css3 flexbox

如何使用flexbox创建下方的图像？

enter image description here 

<div class="add-album">
  <div class="inner">
    <span class='icon'>+</span>
    <span>Create Album</span>
  </div>
</div>

尝试但失败了https://jsfiddle.net/heLqx3vk/

4 个答案:

答案 0 :(得分：1)

display: flex必须位于父标记中，因此内部的项目是有条理的

另外，在flex-direction: column课程中添加inner，因此每行都会inner个孩子

<强> CSS 

.add-album {
  background: #eee;
  width: 150px;
  height: 200px;
  text-align: center;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  display: flex;
  flex-direction: column;
}

.icon {
  font-size: 25px;
  display: block;
  color: #999;
}

答案 1 :(得分：1)

您必须在flex-direction:column课程中使用.inner。

默认情况下，flex-items的flex-direction值为row，因此您必须更改

<强> Updated Fiddle

Stack Snippet

＆＃13;
＆＃13; 
.add-album {
  background: #eee;
  width: 150px;
  height: 200px;
  text-align: center;
  border-radius: 3px;
}

.inner {
  justify-content: center;
  align-items: center;
  flex-direction:column;
  width: 100%;
  height: 100%;
  display: flex;
}

.icon {
  font-size: 25px;
  display: block;
  color: #999;
}
＆＃13; 
<div class="add-album">
  <div class="inner">
    <span class='icon'>+</span>
    <span>Create Album</span>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

Flexbox会自动将内容放入您的包装器中，因此您需要添加flex-direction：column

＆＃13;
＆＃13; 
.add-album {
  background: #eee;
  width: 150px;
  height: 200px;
  text-align: center;
  border-radius: 3px;
}

.inner {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction:column;
}

.icon {
  font-size: 25px;
  display: block;
  color: #999;
}
＆＃13; 
<div class="add-album">
  <div class="inner">
    <span class='icon'>+</span>
    <span>Create Album</span>
    
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-1)

我正在添加这种有弹性的flex-flow：柱包裹; 

.add-album {
  background: #eee;
  width: 150px;
  height: 200px;
  text-align: center;
  border-radius: 3px;
}

.inner {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
}

.icon {
  font-size: 25px;
  display: block;
  color: #999;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet" type="text/css">

</head>
<body>
<div class="add-album">
  <div class="inner">
    <span class='icon'>+</span>
    <span>Create Album</span>
  </div>
</div>
</body>
</html>
相关问题
最新问题