设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

网页设计中flex布局垂直水平居中

编辑: 时间:2018-01-02 08:25:58

   flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。是CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。

  Flexbox 已经被浏览器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ,firefox18+已经支持了本文中所描述的 Flexbox。

  学会使用flexbox

  要为元素设置flexbox布局,只需将display属性值设置为flex。

  #container {

  display: flex;

  }

  flexbox的默认为一个块级元素,如果需要定义为一个行内级的元素,同理:

  #container {

  display: inline-flex;

  }

  flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或者inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。而每一个被设置为flex的容器,它的内部元素都将变成一个flex项目,即是一个伸缩项目。简单的说,flex 定义了伸缩容器内伸缩项目该如何布局。

  回到正题,利用flexbox实现多块状元素的水平居中,只需要将父级容器的Css设置如下:

  #container{

  justify-content:center;

  display:flex;

  }

  使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。

  核心代码如下:

  #container{

  display:flex;

  justify-content:center;

  align-items: center;

  }

  #center{

  }

  代码还是相当的整洁的,在Flex布局中,作用对象是子元素与及父元素,所以在这里我们不妨把body当作一个正常的标签使用,虽然很少这样用,但是为了说明body标签也是很接地气的,所以本例中使用了body标签作为box的父元素。

  现在我们来分析下代码,在Flex有两个东西,一个是Flex容器(子项目父元素),另一个是子项目(Flex容器子元素)。如果不给.box添加样式, 一个h1标签占一行,也就是页面会显示三行文字“flex弹性布局justify-content属性实现元素水平居中”。如果我们给.box添加了 display: flex;那么三个h1标签就妥妥地在一行里排列了,相当于浮动,只不过他不会因为超出了.box的宽度而换行,他总是会在一行内显示。

  由于弹性容器.box添加了 display:flex; 属性,子项目默认是水平排列的,所以给.box追加一个 flex-direction:column 属性来让子项目垂直排列。此时垂直方向作为主轴,所以我们可以使用一个 justify-content:center 来让所有子项目在垂直方向上居中。为了让h1标签内的文字也水平居中,我们也给了h1一个dislay:flex;以及 justify-content:center,由于h1是默认的水平排列,所以 justify-content:center 就可以让文字在水平方向上居中。

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号