/* 参考：https://www.halawata.net/2011/10/css-float-display-box/ */
.tweetbox {
	float: left;	
}

.tweetboxContainer {
	overflow: hidden;
}


/* clearfix */
.tweetboxContainer:before,
.tweetboxContainer:after {
    content: "";
    display: table;
}
 
.tweetboxContainer:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.tweetboxContainer {
    zoom: 1;
}




/*display: flexはflex-direction、justify-content、align-items等々といったプロパティと組み合わせることによって、左から右への単純な横並びだけでなく、右から左、下から上への並び、さらに子要素を等間隔に配置といったことができるようになります。

displayプロパティにflexもしくはinline-flexを指定することで、フレックスコンテナなります。そして、フレックスコンテナの直下の子要素が、自動的にフレックスアイテムになります。注意したいのは、孫要素はフレックスアイテムにはならないことです。

flex-direction:
flex-direction:row：初期値。ltr*の中では左から右に、rtl*の中では右から左に並びます
flex-direction:row-reverse：ltrの中では右から左に、rtlの中では左から右に並びます
flex-direction:column：上から下に並びます。
flex-direction:column-reverse：下から上に並んでいきます。
注：ltrとrtl

ltrとrtlは、文字表記の方向のことです。ltrはleft to right、rtlはright to leftの意味で、dir属性やdirectionプロパティで使用されるキーワードです。


 参照https://www.halawata.net/2011/10/css-float-display-box/　https://app.codegrid.net/entry/flexiblebox-1*/
.tweetbox2Container {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	-moz-flex-direction: row;
	-o-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
}


.tweetblock{
	margin-bottom:1em;
	padding:1em;
	border-top:15px dotted #ddd;
	border-left:5px solid #ddd;
		border-right:5px double red;
				border-bottom:5px dashed yellow;
		
		    background:#8c0e0e;
}

.tweetblock2{
	margin-bottom:1em;
	padding:1em;
	border:10px ridge #ddd;
		    background:#292F33;
}