可以先看看css3 flex的实例:/post/css-learning-18-css3-flex-responsive-design-example.html。
HTML是骨骼、架构,CSS是肌肉、美妆,JS是运动、表现。他们的互相配合才诞生了成千上万的网页,丰富多彩的前端世界让前端开发人员越来越痴迷。尤其是HTML5、CSS3的出现,更加让这种感觉越来越深厚。
在以往要排版一个图片、文字的列表,如:
在做这样的贴边均匀等分列表,一般有2种做法。
采 用ul>li的DOM结构,li左浮动(ie6需要设置为行内样式)。假设ul的宽度为W,每个li项目的总宽度是x,每一行有4个项目。为了让每 一行的第一个li都贴边对齐,那么就需要设置ul左边距为负值。可得,li之间的左边距ML=(W-x*4)/4。详细代码如下:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="http://static.qianduanblog.com/css/3/last.css">
- <title>贴边的均匀等分列表1</title>
- <style>
- .container{
- margin: 50px auto;
- width: 700px;
- overflow: hidden;
- }
- .container ul{
- width: 700px;
- margin: 0 auto;
- margin-left: -75px;
- background: #DEF3FF;
- }
- .container li{
- width: 100px;
- margin-left: 75px;
- margin-bottom: 20px;
- }
- .container .img{
- width: 100px;
- height: 100px;
- }
- .container .title{
- height: 20px;
- line-height: 20px;
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <ul class="clearfix">
- <li class="pull-left">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </li>
- <li class="pull-left">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </li>
- <li class="pull-left">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </li>
- <li class="pull-left">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </li>
- <li class="pull-left">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </li>
- <li class="pull-left">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </li>
- <li class="pull-left">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </li>
- <li class="pull-left">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </li>
- </ul>
- </div>
- </body>
- </html>
上述代码,ul应占用的宽度为700px,每个li的宽度是100px,每行4个,有3个空隙,如果要贴边对齐,就再加一个。每个空隙的宽度为(700-100*4)/4=75px。
两端对齐方法采用的是css2中text-align:textify; 属性,它具有良好的文字排版效果,就像word里的两端对齐一样,表现效果也一致。
一 般认为,两端对齐只对行内样式起作用,而CSS当中是可以重置任意元素为行内或者块状样式的。要想目标群体两端对齐,那么就需要设置所有项目的 display为inline-block(行内块状样式)。因为每一行要两端对齐,每行四个项目li,那么每个项目li占用的宽度就是25%,但在实际 情况中,因为要处理空白的缘故,写20~24%都是比较合理的,下面例子就是一个简单的说明。
在这里需要注意的是,设置两端对齐,项目之间的空白需要额外处理。设置ul的字体大小为0即可。更多详细可以参考:http://www.w3cplus.com/css/text-align-justify-and-rwd.html。
详细的页面代码如下:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="http://static.qianduanblog.com/css/3/last.css">
- <title>贴边的均匀等分列表2</title>
- <style>
- .container{
- margin: 50px auto;
- width: 600px;
- overflow: hidden;
- }
- .container ul{
- width: 600px;
- margin: 0 auto;
- background: #DEF3FF;
- font-size: 0;
- text-align: justify;
- }
- .container li{
- width: 24%;
- margin-bottom: 20px;
- display: inline-block;
- *display: inline;
- *zoom: 1;
- background: #C23A3A;
- }
- .container .inner,
- .container .img{
- width: 100px;
- height: 100px;
- }
- .container .title{
- height: 20px;
- line-height: 20px;
- text-align: center;
- font-size: 14px;
- }
- .container .break-li{
- height: 0;
- width: 100%;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <ul class="clearfix">
- <li>
- <div class="inner">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </div>
- </li>
- <li>
- <div class="inner">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </div>
- </li>
- <li>
- <div class="inner">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </div>
- </li>
- <li>
- <div class="inner">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </div>
- </li>
- <li>
- <div class="inner">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </div>
- </li>
- <li>
- <div class="inner">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </div>
- </li>
- <li>
- <div class="inner">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </div>
- </li>
- <li>
- <div class="inner">
- <p class="img"><img src="http://dummyimage.com/100x100" alt=""></p>
- <p class="title"><a href="#">标题名称</a></p>
- </div>
- </li>
- <li class="break-li"></li>
- </ul>
- </div>
- </body>
- </html>
这种方法工程量比较大,结果如下图:
上面说的例子是前端开发中遇到最多的情况,处理的方式也多种多样,并不局限于以上2种。前端开发中要处理的排版是比较多的,上下排版最简单,左右排版比较麻烦一点,均匀分布、错位排版是最难处理的,我们需要处理和计算各种宽度,这是一个很繁重的过程。
在这种情况,CSS3的flex属性应运而生了。它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距。甚至是在容器的大小发生改变的时候,都可以重新计算,以至于更符合预期的排版。不仅解放了计算器,而且更加优美的服务于响应式设计。
在使用了flex属性之后,居左对齐、居右对齐、两端对齐、居中对齐、顶端对齐、底部对齐,以及处理项目之间的空白和项目宽度、高度的伸缩都可以简单的设置到。
flex的字面意思是,伸缩性的、弯曲的,引申含义为可自由配置的、灵活的意思。CSS3中的flex属性也是这么理解,具有flex属性的容器和容器内的项目都具有弹性计算的能力,以至于符合预定的规则。
flex是display的属性值,目前还处于草稿状态中,所以在书写的时候,需要加上各个浏览器的私有前缀,即-webkit、-moz、-ms、-o等,下面的例子都省略了前缀。
flex属性的命名可谓是一波三折:
display:box;
display:flex-box;
display:flex;
目前的格式为:
- .container{
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: flex;
- }
一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器,伸缩容器的子元素被称为伸缩项目,这些 子元素使用伸缩布局模型来排版。与布局计算偏向使用书写模式方向的块布局与行内布局不同,伸缩布局偏向使用伸缩流的方向。「flex-flow」的值决定 了这些术语如何对应到物理方向(上/右/下/左)、物理轴(垂直/水平)、物理大小(宽度/高度)。——来自 http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
详细说明如下:
注意:CSS的columns
在伸缩容器上没有效果。float
、clear
和vertical-align
在伸缩项目上没有效果。
row nowrap为其默认属性值,分别表示flex-direction和flex-wrap属性。
以上描述,参考下图:
以上描述,参考下图:
与justify-content类似,只是这里的参考方向为侧轴。
以上描述,参考下图:
整数,默认为0,负无穷到正无穷。容器中的项目都是依order值从小到大排列,order值越大越就越在主轴方向的末尾。比如:
大于0的正数值。
大于0的正数值。
如果项目制定了实际长度,则此长度为主。否则为自动计算长度。默认为auto。
格式为:flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
参考于容器的align-items(2.7)。