我怎样才能实现在底部的浮动，并与CSS的Flexbox顶部浮动？ [英] How can I achieve float left at bottom and float right at top with css flexbox?

问题描述

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

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

以下代码应该增加：

  display：flex; //父容器
 align-self：flex-end; //为子div-1放置在底部
 margin-left：auto; //对于子div-2来说，它放在右边
  

（我不喜欢 margin-left：auto ，因为在非常小的屏幕上没有微小的空白。）

解决方案：

上面的代码用下面的代码进行了扩充，子代得到了额外的css：

pre > display：flex; //也为其内容的子框
align-items：center; //垂直居中
justify-content：center; //水平居中文本


解决方案

：

父母和孩子都必须使用flex。 （col-md-12来源于bootstrap，与问题无关）

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纯黑色; 
 height：200px; 
  

   flex-wrap：wrap;  / *是不必要的* /  

 } 
 
 .div {
 padding：10px; 
颜色：白色; 
背景：黑色; 
 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; 
} 
  

How can I simulate float left bottom and float right at top with the CSS3 flexbox? I want to achieve following situation (Important: the text in the div boxes should be also vertical and horizontal centered):

EDIT: PLNKR EXAMPLE: http://plnkr.co/edit/oVfbAAIZxRQLRRML7rJR?p=preview But the text in the div boxes should be also vertical and horizontal centered.

Following Code should be augmented:

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

(I don't like margin-left: auto because there is no min-margin at very small screens.)

Solution:

The code above is augmented with the code below and children get following additional css:

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

解决方案

That's the solution:

Both parent and children have to use flex. (col-md-12 is from bootstrap and has nothing to do with the question)

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;
 }

这篇关于我怎样才能实现在底部的浮动，并与CSS的Flexbox顶部浮动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！