时间戳

首页 > 解决方案 > CSS flex-item align self 不适用于 flex-wrap 父级

html - CSS flex-item align self 不适用于 flex-wrap 父级

问题描述

我有一个 flex 父容器设置为flex-wrap: wrapand justify-content: flex-end。我有一个 flex-child，button-group我想将它与 flex-start 对齐，但align-self它不工作。

.container{
  width: 500px;
  height: 500px;
  background: pink;
  
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.button-group {
  background: lightblue;
  align-self: flex-start; /* Not working!*/
  padding: 5px 10px;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
}
<div class="container">
 <div class="button-group">
  <button></button>
  <button></button>
  <button></button>
 </div>

 <div class="main-box"></div>
 <div class="myfooter"> </div>
</div>

如何让按钮组在保留弹性包装的同时向左对齐？

标签： htmlcssflexbox

解决方案

Flexbox 在一维方向上对齐项目。这就是为什么flex-start没有工作，

为了使其工作，用 div 包装它并添加适当的样式，如代码段所示

.container {
  width: 500px;
  height: 500px;
  background: pink;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.button-group {
background: lightblue;
padding: 5px 10px;
display: inline-block;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
}
.holder{width: 100%;}
<div class="container">
<div class="holder">
  <div class="button-group">
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  </div>

  <div class="main-box"></div>
  <div class="myfooter"> </div>
</div>

推荐阅读