关于绝对居中和div并列——flex属性

2019独角兽企业重金招聘Python工程师标准>>>

在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>

效果图：

图二

以上只是用到的属性，以后遇到再更新

转载于:https://my.oschina.net/u/3476497/blog/1833042