Flexbox 中心和右下角的項目

Question

我正在嘗試使用 flexbox 實現以下結果：

我嘗試使用以下 html 但我無法讓它工作。

<div class=" flex-center">
    <div class="flex-item-center">
        <p>
            Some text in box A
        </p>
    </div>
    <div class="flex-item-bottom">
        <p>Some text in box B....</p>
    </div>
</div>

CSS：

.flex-center {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.flex-item-center {
  align-self: center;
}

.flex-item-bottom {
  align-self: flex-end;
}

我怎樣才能使它看起來像圖像？

Answer 1

我已經提出了一個可行的解決方案。

 .flex-center { background-color: #739FD0; color: #000000; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; height: 400px; } .flex-center-bottom { background-color: #739FD0; color: #000000; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-content: center; align-items: center; } .flex-item-center { border: solid 2px #4675AA; order: 0; flex: 0 1 auto; align-self: center; } .flex-item-bottom { border: solid 2px #4675AA; order: 1; flex: 0 1 auto; align-self: flex-end; }

 <div class="flex-center"> <div class="flex-item-center"> <p>DROP FILES HERE</p> </div> </div> <div class="flex-center-bottom"> <div class="flex-item-center"> <p>Hint: You can also drop files in the all files page</p> </div> </div>

2017 年更新：在 Google Chrome 版本 62.0.3202.89（官方版本）（32 位）中測試。

 .flex-center, .flex-center-bottom { align-items: center; background-color: #739FD0; color: #000000; display: flex; } .flex-center { height: 400px; justify-content: center; } .flex-center-bottom { justify-content: flex-end; } .flex-item-center { border: solid 2px #4675AA; font-family: Arial, sans-serif; font-size: 1.6em; line-height: 1px; padding: 0 3px; }

 <div class="flex-center"> <div class="flex-item-center"> <p>Some text in box A</p> </div> </div> <div class="flex-center-bottom"> <div class="flex-item-center"> <p>Some text in box B...</p> </div> </div>

我希望這可以幫助你。

Answer 2

這是你想要的？ http://jsfiddle.net/DIRTY_SMITH/q12bh4se/6/

body {
  background-color: lightblue;
}

#main {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: -webkit-flex;
  /* Safari */
  -webkit-align-items: flex-start;
  /* Safari 7.0+ */
  display: flex;
  align-items: flex-start;
}

#main div {
  -webkit-flex: 1;
  /* Safari 6.1+ */
  flex: 1;
}

.flex-item-center {
  margin-left: 40%;
  border-style: solid;
  -webkit-align-self: center;
  /* Safari 7.0+ */
  align-self: center;
}

.flex-item-bottom {
  border-style: solid;
  align-self: flex-end;
}

Answer 3

在 Bootstrap 4.x 中，您可以使用實用程序類

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-12"> <div class="d-flex justify-content-center h-100"> <div class="d-flex align-items-center">center center</div> </div> <div class="d-flex justify-content-end h-100"> <div class="d-flex align-items-end">right bottom</div> </div> </div> </div> </div>

---

編輯

由於我收到了一些反對票，因此我認為應該進行審查。
對我來說，上面的答案仍然有效，但是我明白它需要一定的高度並不清楚。

如何達到這個height並不重要。 要么您在包裝器上的 CSS 中將其設置為固定，要么為了代碼片段，我們設置文檔的高度以使其具有響應性。

如果“中心內容”占據高度空間，則“底部內容”可以絕對定位，因此不會增加高度。 剩下的就是確保它從bottom覆蓋整個寬度和位置。

 html, body { height: 100%; } /* can be anything that generates height */

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="d-flex justify-content-center h-100"> <div class="d-flex align-items-center">center center</div> </div> <div class="d-flex justify-content-end position-absolute w-100 fixed-bottom"> <div class="d-flex align-items-end">right bottom</div> </div>

所以在功能方面，Bootstrap 中不需要額外的 CSS。

文檔證明內容
文檔位置

Answer 4

嘗試：

 #main-wrapper { background: blue; width: 100%; height: 100%; min-height: 300px; display: flex; align-items: center; } .x-center { display: flex; justify-content: center; } .y-center { flex: 1; } .x-right { justify-content: flex-end; } .y-bottom { align-self: flex-end; } .small-div { padding: 10px; }

 <div id="main-wrapper"> <div class="x-center y-center small-div">Center center</div> <div class="x-right y-bottom small-div">Bottom Right</div> </div>

筆記：

align-self 不適用於 IE10 或更低版本。 任何人都知道如何在沒有相對位置的情況下使中心 div 更靠左一點？ 謝謝