Question

我有一个设置为flex-wrap: wrap和justify-content: flex-end的flex父容器。我有一个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>

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

Answer 1

Flexbox在1D方向上对齐项目。这就是flex-start无法正常工作的原因，

在oreder中使其工作以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>

Answer 2

尝试一下。您需要为按钮组使用其他包装，并为该包装应用display: flex; flex-basis: 100%;。

https://jsfiddle.net/Sampath_Madhuranga/7ad2u804/

.container{
  width: 500px;
  height: 500px;
  background: pink;
  
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.button-wrap {
  display: flex;
  flex-basis: 100%;
}
.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-wrap">
    <div class="button-group">
    <button></button>
    <button></button>
    <button></button>
   </div>
  </div>
 

 <div class="main-box"></div>
 <div class="myfooter"> </div>
</div>

Answer 3

如果您不需要按钮组右侧的边距，只需在.margin-right:auto;上使用.button-group使其左对齐即可。

.container{
  width: 500px;
  height: 500px;
  background: pink;
  
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.button-wrap {
  display: flex;
  flex-basis: 100%;
}
.button-group {
  background: lightblue;
  align-self: flex-start;
  padding: 5px 10px;
  margin-right: auto;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
}

<div class="container">
  <div class="button-wrap">
    <div class="button-group">
    <button></button>
    <button></button>
    <button></button>
   </div>
  </div>
 

 <div class="main-box"></div>
 <div class="myfooter"> </div>
</div>

Answer 4

发生了什么，伸缩方向默认值为行，因此您的子元素水平放置，但是由于容器宽度是静态的，并且无法展开以包装所有子元素，因此将其向下推，这会导致版式可能看起来是垂直的，但仍然水平放置。并且在这种情况下（伸缩方向：行），align-self属性仅将伸缩项设置为垂直方向。

如何修复它，首先，您需要应用flex-direction：列。然后，您可以为弹性项目设置align-self，现在它将水平对齐

.container{
  width: 500px;
  height: 500px;
  background: pink;
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
}

.button-group {
  background: lightblue;
  align-self: flex-start; /*working now!*/
  padding: 5px 10px;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
  align-self: flex-end;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
  align-self: flex-end;
}

<div class="container">
 <div class="button-group">
  <button></button>
  <button></button>
  <button></button>
 </div>

 <div class="main-box"></div>
 <div class="myfooter"> </div>
</div>

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

4 个答案: