您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5

flex布局学习笔记之align-self对齐方式与交叉轴

发布时间：2018-04-10 17:16:48编辑：雪饮阅读（）

 flex布局中align-self对齐方式受影响于交叉轴.并且不同的交叉轴下不同的对齐方式要相应对高或宽做下调整,否则效果不明显会导致自己以为某个对齐方式不生效.

交叉轴默认是正向水平交叉轴的

下面案例用到的公共css

.pub{

         border:1px solid green;

         }

(1)auto对齐方式

auto对齐方式无论在正向垂直交叉轴还是正向水平交叉轴都是居于左上角的.

css：

body{

         display: flex;

/*设置正向垂直交叉轴*/

         flex-direction:column;

         width:800px;

         height:800px;

         background:blue;

         border:1px solid red;

         }

.box1{

         background:pink;

         align-self:auto;

         width:200px;

         height:100px;

         }

html:

<div class="box1 pub">auto</div>

(2) flex-start对齐方式

flex-start对齐方式与auto一模一样

(3) flex-end对齐方式

正向垂直交叉轴时flex-end在右上角，正向水平交叉轴时flex-end是在左下角

css:

body{

         display: flex;

/*设置正向垂直交叉轴*/

         flex-direction:column;

         width:800px;

         height:800px;

         background:blue;

         border:1px solid red;

         }

.box3{

         background:pink;

         align-self:flex-end;

         width:200px;

         height:100px;

         }

html:

<div class="box3 pub">flex-end</div>

(4) center对齐方式

该对齐方式在垂直交叉轴时水平居中，在水平交叉轴时垂直居中。