浅谈新的布局方式-flex

Maxiye 发布于2019-04-23 13:35 / 746人阅读

摘要：布局，可以简便完整响应式地实现各种页面布局。一基本概念采用布局的元素，称为容器，简称容器。它的所有子元素自动成为容器成员，称为项目，简称项目。项目在垂直上的对齐方式。优先级或者允许单个项目有与其他项目不一样的对齐方式，可覆盖属性。

引言：

　　网页布局在flex出来之前，是由盒模型为底子，float，position，table，百分比来进行布局的，重绘的比较多，影响性能，复杂又不好维护。flex布局，可以简便、完整、响应式地实现各种页面布局。我在网上看到有很多写flex布局的博文，自己就写着复习一下这个flex布局。

一基本概念：

　　采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。（任何一个容器都可以指定为Flex布局，块级元素，行内元素也可。）　　它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

二属性：

　容器的6大属性：　　1 flex-direction 项目的排列方向 　　　　flex-direction: row;（默认值）主轴为水平方向,从右往左。　　　　　　　　　　 row-reverse; 主轴为水平方向，从左往右。　　　　　　　　　　 column; 主轴为垂直方向，从上往下。　　　　　　　　　　　column-reverse; 主轴为垂直方向，从下往上。　　2 flex-wrap 是否换行 　　　　flex-wrap: no-wrap（默认）：不换行。　　　　　　　　 wrap : 换行。　　　　　　　　　 wrap-reverse : 换行，从下往上换行。　　3 flex-flow flex-direction属性和flex-wrap属性的简写形式。 　　　　flex-flow : row nowrap (默认值) 　　4 justify-content 项目item在水平上的对齐方式。 　　　　justify-content: flex-start; 往右边对齐　　　　　　　　　　　 flex-end; 往左边对齐　　　　　　　　　　　 center; 往中间对齐　　　　　　　　　　　 space-between; 两边对齐，项目之间的间隔都相等。　　　　　　　　　　　 space-around; 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。　　5 align-items 项目item在垂直上的对齐方式。 　　　　align-items: flex-start; 往上对齐。　　　　　　　　　　flex-end; 往下对齐。　　　　　　　　　　center; 往中间对齐。　　　　　　　　　　baseline; 项目的第一行文字的基线对齐。　　　　　　　　　　stretch;（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。　　6 align-content 多个项目在垂直上的对齐方式。 　　　　ps：如果项目只有一根轴线，该属性不起作用　　　　属性和align-content的属性一样。　项目的6大属性　　1 order 项目的排列顺序。数值越小，排列越靠前，默认为0（按代码书写的顺序来。）　　2 flex-grow 项目的放大比例，默认为0（即如果存在剩余空间，也不放大。）　　　　如果item都为1，则均等平摊整个空间。如果有一个item和其他的item不相等，则按照比例放大。　　3 flex-shrink 项目的缩小比例，默认为1（即如果空间不足，该项目将缩小。）　　　　如果item都相等，则均等平摊空间，若空间不足，则都等比例缩小。如果有一个item为0；当空间不足时，其不缩小。　　　　ps：负值无效。　　4 flex-basis 在分配多余空间之前，项目占据的水平上的空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。　　5 flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。　　　　优先级：auto (1 1 auto) 或者 none （0 0 auto); 　　6 align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。　　　　ps:只针对于垂直方向上的,水平方向上没有该属性。　　　　属性和align-items是的属性一样，多了一个auto。

三实例

　flex布局大部分实例可以参考https://www.w3.org/TR/css-flexbox/#box-model　写的特别详细。

　　1 div使用display：flex后初始化的结果：

　　html代码：

<div class="container">
     <span class="item">
         <span class="item">111span>
     span>
     <span class="item">2span>
     <span class="item">3span>
     <span class="item">4span>
     <span class="item">5span>
div>

　　css 样式：

.container{
     height: 500px;
     width: 500px;
     border: 1px solid;
     display: flex;
     position: relative;       
}
.item{
     width: 50px;
     height: 50px;
     border:1px solid #ccc;
     float: right;
     vertical-align: middle;
}

　　结果：

　　这个例子说明了:

　　　　1 只要父元素设置了display：flex;所有的item都成了行内块或者块级元素，可以设置宽度高度. 　　　　2 item中的flaot无效，同样的 clear也无效，vertical-align也无效，但是position:absolute是有效（我看网上有人说是无效的。）　　　　3 父元素设置了flex后，只针对于子元素，其后代元素不起作用，若想要后代元素起作用，必先给他的父元素声明flex。　　2 实现导航栏的nav两边对齐，就是有导航的在左边，登陆之类的在右边。　　html:

<nav>
     <ul>
          <li><a href="/">首页a> li>
          <li><a href="/">产品a>li>
          <li><a href="/">关于我们a>li>
          <li class="login"><a href="/">登陆a>li>
      ul>
nav>

　　css样式：

nav > ul{
   display: flex;
}
nav  li {
    list-style: none;
    margin: 10px;
}
.login{
     margin-left: auto;
}

　　结果如下：

　　如果不使用display：flex来做的话，可以使用float的方式来说，但是相对来说稍微麻烦点，代码量绝对比flex多。追求简单何乐不为？

四兼容性

　　如图可知，兼容性基本上都支持来，只有ie9以下不支持。flex布局最适合在移动端进行布局，开发中要适当的添加私有前缀来兼容。

.flex() {
    display: -webkit-box; 
    display: -moz-box; 
    display:-webkit-flex;
    display: -ms-flexbox;
    display:flex;
}

参考资料：

菜鸟教程 http://www.runoob.com/w3cnote/flex-grammar.html

阮一峰大大 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2063.html

2018你成长了么？一份给你的前端技术清单

摘要：由于个人精力有限，一些技术点的归纳可能有失偏颇，或者目前并未纳入进来，因此上的清单内容也会不断更新。 2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成...

K_B_Z 2019-08-02 11:53 评论0 收藏0
2018你成长了么？一份给你的前端技术清单

摘要：由于个人精力有限，一些技术点的归纳可能有失偏颇，或者目前并未纳入进来，因此上的清单内容也会不断更新。 2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成...

LancerComet 2019-08-29 17:08 评论0 收藏0
2018你成长了么？一份给你的前端技术清单

摘要：由于个人精力有限，一些技术点的归纳可能有失偏颇，或者目前并未纳入进来，因此上的清单内容也会不断更新。 2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成...

Flands 2019-08-23 12:46 评论0 收藏0
华为云CEO张平安谈新组织架构调整：围绕业务场景已成立三个业务部_云资讯

摘要：新的云组织架构不再只针对单一的云服务领域，比如计算服务存储服务，现在我们分别围绕对云需求的三种业务场景成立了三个业务部即公有云领域，伙伴云领域，以及华为云领域。这轮新的组织架构调整震惊业界，代表着华为对云的押注投入更上一层楼。华为云CEO张平安（左二）。图片来源：每经记者王晶摄今年以来，华为对云业务进行了多次组织架构调整。伴随着人事调整进入稳定期，...

flybywind 2021-10-14 09:42 评论0 收藏0
浅谈web自适应

摘要：本篇文章分享了一些处理多屏幕自适应的经验，希望有益于各位。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它经常被的伸缩性布局方式替代，变得越来越弹性十足。转自：http://www.cnblogs.com/consta... 前言随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和...

kid143 2019-08-02 15:57 评论0 收藏0