align-items属性(CSS设置在交叉轴上如何水平对齐)
做事例中，咱们会发现让子元素在父元素中笔直居中，要设置margin和padding等，各种设置才干笔直居中
现在能够运用CSS3中的align-items完成
align-items
定义子元素在父元素穿插轴上怎么对齐的，大多数不理解穿插轴是什么，下面举例来说明，不多说直接上代码
现在是这样显现的，我需要让子元素在父元素中笔直居中
1需要给父元素加display：flex;（不明白的能够先查下，后期会说明这个特点的效果）
2.再给父元素(也便是box)加align-items:center;
效果如下
你会发现子元素已经在父元素笔直居中了，便是这么的easy
你能够把div的左上角看做穿插轴也便是X轴与Y轴的穿插点
当然align-items也有其他的特点
flex-start项目坐落容器的开头
flex-end项目坐落容器的结束
center项目坐落容器的中心
baseline项目第一行文字的基线对齐
stretch假如子元素未设置或设置auto,将占满整个容器的高度
flex-start项目坐落容器的开头
上面说了能够把div的左上角看做穿插轴也便是X轴与Y轴的穿插点，那么这个穿插点也便是起点
效果：
那么便是以左上角对齐
flex-end项目坐落容器的结束
效果：
说白了便是靠底部对齐
baseline项目第一行文字的基线对齐
效果
stretch假如子元素未设置或设置auto,将占满整个容器的高度
效果
我的子元素P符号未设置任何的高度，假如设置了该特点，则会继承父元素的高度
CSS设置在交叉轴上如何水平对齐
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<linkrel="stylesheet"type="text/css"href="reset.css"/>
<styletype="text/css">
.box{
width:400px;height:400px;background-color:aqua;
margin:100pxauto;overflow:hidden;
display:flex;/*转成弹性盒子*/
/*flex-direction:row;*//*默认值,主轴是水平正向，从左到右*/
/*flex-direction:column;*//*主轴是垂直正向，从上到下*/
/*flex-direction:row-reverse;*//*主轴是水平反向，从右到左*/
/*flex-direction:column-reverse;*//*主轴是垂直反向，从下到上*/
/*flex-wrap:nowrap;*//*默认值,不换行*/
flex-wrap:wrap;/*换行,默认交叉轴正向换行*/
/*flex-wrap:wrap-reverse;*//*换行,交叉轴反向换行*/
/*justify-content:flex-start;*//*默认值,开始方向对齐*/
/*justify-content:flex-end;*//*结束方向对齐*/
/*justify-content:center;*//*居中对齐*/
justify-content:space-between;*//*两端对齐
/*justify-content:space-around;*//*项目之间间隔是两侧间隔*2*/
/*子元素在交叉轴方向的对齐方式*/
align-items:flex-start;/*开始方向对齐*/
align-items:flex-end;/*结束方向对齐*/
align-items:center;/*居中对齐*/
align-items:baseline;/*文字基线对齐*/
align-items:stretch;/*默认值*/
}
.wyzx{
width:120px;height:50px;line-height:50px;
background-color:red;text-align:center;color:white;
margin:10px;
}
</style>
</head>
<body>
<!--
子元素在交叉轴方向的对齐方式
-->
<!--ul.box>li.wyzx{我要自学$}*3-->
<ulclass="box">
<liclass="wyzx">视觉癖1</li>
<liclass="wyzx">视觉癖2</li>
<liclass="wyzx">视觉癖3</li>
<liclass="wyzx">视觉癖4</li>
<liclass="wyzx">视觉癖5</li>
<liclass="wyzx">视觉癖6</li>
<liclass="wyzx">视觉癖7</li>
</ul>
</body>
</html>
作品标签：
优秀作品：
最新作品：
评论列表（共183人参与）参与讨论或分享设计作品获得视觉癖积分奖励
、日子需求注册会员
2021-05-25 1:13:52
景，比如模特布景。 服装平铺拍摄能够挑选不容易皱的毛毡布景布，最不会皱的要数那种地毯式布景布了，拍服装平铺搭配作用十分好。 ="height: 501px; width: 400px;" />
回复
里的天空注册会员
2021-05-25 10:31:35
图 1、我不游客
2021-05-25 20:5:28
游客73847：align-items属性念建筑，其落成之日距今已有八十多年。 2、钱壮飞（1896年9月25日1935年4月1日），男，汉族，本名钱北，又名钱潮，浙江湖州人，中共隐蔽战线的&l望而却步，可是能够小面积的涂刷在背景墙，其他墙面用浅色的暖色。来平衡空间亮度，达到一举两得的视觉效果。
回复
