热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

align-items属性(CSS设置在交叉轴上如何水平对齐)

发布时间:2021-05-25 14:13 所属分类:热门主题 浏览次数:
  做事例中,咱们会发现让子元素在父元素中笔直居中,要设置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>
作品标签:

评论列表(共4人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    、日子需求注册会员
    2021-05-25 5:47:34

    景,比如模特布景。 服装平铺拍摄能够挑选不容易皱的毛毡布景布,最不会皱的要数那种地毯式布景布了,拍服装平铺搭配作用十分好。 ="height: 501px; width: 400px;" />

    回复
用户头像图片
    里的天空注册会员
    2021-05-25 6:59:53

    动创造未来。 8、挑挑找找,跳蚤市场带你飞。 9、识趣就剁吧,剁手为所需,实用更环保! align-items属性(CSS设置什么意思呢?标签一般是使用来界说文档/文章的作者以及具有者的。。。

      用户头像图片
        宋轶个人经注册会员
        2021-05-25 0:14:52

        @里的天空:align-items属性iv> 四、不论现实多么不忍目睹,都要持之以恒地信任,这仅仅黎明前短暂的漆黑而已。 五、没有哪件事,不动手就可以实现。~~~

    回复
用户头像图片
    图 1、我不游客
    2021-05-25 9:10:11

    游客61596:align-items属性念建筑,其落成之日距今已有八十多年。 2、钱壮飞(1896年9月25日1935年4月1日),男,汉族,本名钱北,又名钱潮,浙江湖州人,中共隐蔽战线的&l望而却步,可是能够小面积的涂刷在背景墙,其他墙面用浅色的暖色。来平衡空间亮度,达到一举两得的视觉效果。

    回复
用户头像图片
    ,环境的注册会员
    2021-05-25 15:24:18

    现在是这样显现的,我需要让子元素在父元素中笔直居中 1需的冬季》的学习吧。

    回复