flexを利用したfloatを使わないレイアウト

左右分割のfloatのような使い方

基本となるhtml

<div class="container">
	<div class="left-col"></div>
	<div class="right-col"></div>
</div>

css部分

.container{
	width: 1200px;
	display: flex;
	justify-content: space-between;
}
.left-col{
	width:  900px;
}
.right-col{
	width: 250px;
}

3行目と4行目、親要素にこのプロパティを指定するだけです。
7行目と10行目、widthは％で指定しても大丈夫です。
justify-content: space-between;で左右に別れます。

上下左右の中央寄せ

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
}

3行目は横に中央寄せ、4行目は縦に中央寄せになる指定です。

右下寄せ

.container {
	display: flex;
    justify-content: flex-end;
    align-items: flex-end;
	height: 300px;
}

3行目は右寄せ、4行目は下寄せになる指定です。
左上に寄せる際はflex-endをflex-startに変更します。