2016-11-14 8 views
0

私のフレックスアイテムに問題があります。フレックスボックス内のスパン位置

フレックスdivの2 spansを配置して、1つが上になるようにしようとしていますが、flexのプロパティのように、隣り合っているように見えます。彼らはの全幅を取るよう

#til-container #til-header #til-date-container { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t position: absolute; 
 
\t top: 30px; 
 
\t margin: auto; 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t border-radius: 50%; 
 
\t border: 1px solid #CCC; 
 
\t background: white; 
 
} 
 

 
#til-container #til-header #til-date-container #til-date { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t position: relative; 
 
\t margin: auto; 
 
\t width: 52px; 
 
\t height: 52px; 
 
\t border-radius: 50%; 
 
\t background: #d24949; 
 
\t color: #FFF; 
 
\t font-family: 'Lato', sans-serif; 
 
\t text-transform: uppercase; 
 
\t font-weight: 900; 
 
\t text-align: center; 
 
} 
 

 
#til-container #til-header #til-date-container #til-day { 
 
\t font-size: 20px; 
 
} 
 

 
#til-container #til-header #til-date-container #til-month { 
 
\t font-size: 10px; 
 
}
<div id="til-container"> 
 
\t 
 
\t <div id="til-header"> 
 
\t \t <div id="til-date-container"> 
 
\t \t \t <div id="til-date"> 
 
\t \t \t \t <span id="til-day">25</span> 
 
\t \t \t \t <br/> 
 
\t \t \t \t <span id="til-month">dec</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
</div>

が、私はそのようなブロックとしてスパンを表示しているいくつかのことを試してみた:

Here is what I'm looking to do (the date element)

、ここでは、私が持っているものです次のスパンを最初のスパンの下に置くように強制しますが、それは機能しません。何か案は ?フレックスを使用して

答えて

3

、あなたが#til-date

flex-direction: column; 
justify-content: center; 

に追加することができ、私はそれを追加するために、あなたのスニペットを編集した:

#til-container #til-header #til-date-container { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t position: absolute; 
 
\t top: 30px; 
 
\t margin: auto; 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t border-radius: 50%; 
 
\t border: 1px solid #CCC; 
 
\t background: white; 
 
} 
 

 
#til-container #til-header #til-date-container #til-date { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t position: relative; 
 
\t margin: auto; 
 
\t width: 52px; 
 
\t height: 52px; 
 
\t border-radius: 50%; 
 
\t background: #d24949; 
 
\t color: #FFF; 
 
\t font-family: 'Lato', sans-serif; 
 
\t text-transform: uppercase; 
 
\t font-weight: 900; 
 
\t text-align: center; 
 

 
    /* Added */ 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
#til-container #til-header #til-date-container #til-day { 
 
\t font-size: 20px; 
 
} 
 

 
#til-container #til-header #til-date-container #til-month { 
 
\t font-size: 10px; 
 
}
<div id="til-container"> 
 
\t 
 
\t <div id="til-header"> 
 
\t \t <div id="til-date-container"> 
 
\t \t \t <div id="til-date"> 
 
\t \t \t \t <span id="til-day">25</span> 
 
\t \t \t \t <br/> 
 
\t \t \t \t <span id="til-month">dec</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
</div>

+0

が、これは私がやってみたかったまさにです、ありがとうございました。私はCSSを微調整して少し滑らかにしてから、
をhtmlから削除しました。完璧です!ありがとう。 – eloism

関連する問題