首页 > > 网页制作 > css >

浅谈新的布局方式-flex

2018-06-29 06:37:43来源：博客园阅读 ()

引言：

　　网页布局在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">111</span>
     </span>
     <span class="item">2</span>
     <span class="item">3</span>
     <span class="item">4</span>
     <span class="item">5</span>
</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?^%$

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：xampp 安装以及相关问题

下一篇：checkbox 全选

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签