如何使用CSS Flexbox实现底部向左浮动和顶部向右浮动？

debugcn 发表于 Dev

用户名

如何使用CSS3 flexbox模拟左下浮动和右上浮动？我想实现以下情况（重要提示： div框中的文本也应垂直居中，水平居中）：

编辑：PLNKR示例：http ://plnkr.co/edit/oVfbAAIZxRQLRRML7rJR?p=preview但是div框中的文本也应该垂直和水平居中。

以下代码应增加：

display: flex;         // for parent container
align-self: flex-end;  // for child div-1 to place it at bottom
margin-left: auto;     // for child div-2 to place it right top

（我不喜欢，margin-left: auto因为在很小的屏幕上没有最小边距。）

解决方案：

上面的代码增加了下面的代码，子代得到以下附加的css：

display: flex;             // also for child box for its content
align-items: center;       // center vertically
justify-content: center;   // center text horizontally

用户名

那是解决方案：

父母和孩子都必须使用flex。（col-md-12来自引导程序，与问题无关）

的HTML

  <div class="content col-md-12">
      <div class="div div-1">Div 1</div>
      <div class="div div-2">Div 2</div>
  </div>

的CSS

.content {
    display: flex;
    padding: 20px;
    border: 1px solid black;
    height: 200px;

    flex-wrap: wrap;  /* is not necessary */

}

.div {
    padding: 10px;
    color: white;
    background: black;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div-1 {
    height: 90px;
    align-self: flex-end;
 }

.div-2 {
    height: 60px;
    margin-left: auto;
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。