色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

使用Flex對(duì)齊元素

CSS

我正在嘗試?yán)斫鈌lex和垂直對(duì)齊文本。我知道外面有很多帖子，我也一直在閱讀W3Docs的文章，但似乎仍然無法掌握其中的概念。

以下面的例子為例。我想垂直對(duì)齊第一個(gè)框中的數(shù)字1。我還希望這些框向左流動(dòng)，但也向上填充框1留下的空白空間。

誰能給我解釋一下，讓我明白嗎？

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+*/
        flex-wrap: wrap;
        max-width: 700px;
      }
      .box {
        color: white;
        margin: 10px;
        width: 200px;
        height: fit-content;
        font-size: 50px;
        text-align: center;
        background-color: steelblue;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="box" style="height: 400px">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </body>
</html>

# # #如果您希望所有其他框都位于框1的右側(cè)，則使用flex-direction:列；可能更合適。您可以使用flex-flow:column wrap；作為方向和換行的簡(jiǎn)寫。

若要使兩列都向左流動(dòng):align-content:flex-start；

要使右列項(xiàng)目從上到下均勻分布:justify-content:space-between；

要垂直居中框內(nèi)容:使框也成為流動(dòng)容器，并對(duì)齊:

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

這是你想要的結(jié)果嗎？

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+*/
        flex-flow: column wrap;
        max-height: 400px;
        align-content: flex-start;
        justify-content: space-between;
      }
      .box {
        color: white;
        margin: 10px;
        width: 200px;
        height: fit-content;
        font-size: 50px;
        text-align: center;
        background-color: steelblue;
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="box" style="height: 400px"><p>1</p></div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </body>
</html>