關於絕對居中和div並列——flex屬性

在css中不少時候會遇到瀏覽器絕對垂直水平居中的問題，如下記錄在項目中用到的例子。

1.絕對居中。

display:flex;
justify-content:center;
align-items:center;

 2.固定的寬度排列div。

原理：將最外層的div寬度按照子層的div寬度均分，整齊排列，若是超出了就往下一行排列

<div style="display:flex;flex-direction:row;flex-wrap:wrap;width:1000px;">
	<div style="margin-bottom: 20px;width:285px;">
	</div>	
    <div style="margin-bottom: 20px;width:285px;">
	</div>	
    <div style="margin-bottom: 20px;width:285px;">
	</div>	
    <div style="margin-bottom: 20px;width:285px;">
	</div>	
    <div style="margin-bottom: 20px;width:285px;">
	</div>	
    <div style="margin-bottom: 20px;width:285px;">
	</div>	
</div>

效果如圖：

3.在必定的寬度內分佈的排列div。

.question-row1{         
       display:flex;
       flex-direction: column;
       align-items:center;
}
.question-options{
		padding-bottom: 14px;
		flex-wrap: wrap;
	    display: flex;
	    line-height: 30px;
	    justify-content: space-between;
}

<div class="question-row1">
	<div class="question-row" style="width: 1000px;display:flex;flex-direction: column;">
       <div class="question-options">
	     <span style="padding-right: 40px">
	       <input type="hidden" name="option" id="${option.optionId}" value="${option.score}">
		   <span>${option.content}</span>
	     </span>
       </div>
    </div>
</div>

效果圖：

圖二

以上只是用到的屬性，之後遇到再更新