可以先看看css3 flex的实例：。一、flex应运而生HTML是骨骼、架构，CSS是肌肉、美妆，JS是运动、表现。他们的互相配合才诞生了成千上万的网页，丰富多彩的前端世界让前端开发人员越来越痴迷。尤其是HTML5、CSS3的出现，更加让这种感觉越来越深厚。在以往要排版一个图片、文字的列表，如：
在做这样的贴边均匀等分列表，一般有2种做法。1、浮动方法（普通）采用ul>li的DOM结构，li左浮动（ie6需要设置为行内样式）。假设ul的宽度为W，每个li项目的总宽度是x，每一行有4个项目。为了让每一行的第一个li都贴边对齐，那么就需要设置ul左边距为负值。可得，li之间的左边距ML=(W-x*4)/4。详细代码如下：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&link rel="stylesheet" href="/css/3/last.css"&
&title&贴边的均匀等分列表1&/title&
.container{
margin: 50
width: 700
.container ul{
width: 700
margin-left: -75
background: #DEF3FF;
.container li{
width: 100
margin-left: 75
margin-bottom: 20
.container .img{
width: 100
height: 100
.container .title{
height: 20
line-height: 20
text-align:
&div class="container"&
&ul class="clearfix"&
&li class="pull-left"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&li class="pull-left"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&li class="pull-left"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&li class="pull-left"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&li class="pull-left"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&li class="pull-left"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&li class="pull-left"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&li class="pull-left"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&/html&上述代码，ul应占用的宽度为700px，每个li的宽度是100px，每行4个，有3个空隙，如果要贴边对齐，就再加一个。每个空隙的宽度为(700-100*4)/4=75px。2、两端对齐方法（另类）两端对齐方法采用的是css2中text-align: 属性，它具有良好的文字排版效果，就像word里的两端对齐一样，表现效果也一致。
一般认为，两端对齐只对行内样式起作用，而CSS当中是可以重置任意元素为行内或者块状样式的。要想目标群体两端对齐，那么就需要设置所有项目的display为inline-block（行内块状样式）。因为每一行要两端对齐，每行四个项目li，那么每个项目li占用的宽度就是25%，但在实际情况中，因为要处理空白的缘故，写20~24%都是比较合理的，下面例子就是一个简单的说明。
详细的页面代码如下：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&link rel="stylesheet" href="/css/3/last.css"&
&title&贴边的均匀等分列表2&/title&
.container{
margin: 50
width: 600
.container ul{
width: 600
background: #DEF3FF;
font-size: 0;
text-align:
.container li{
width: 24%;
margin-bottom: 20
display: inline-
background: #C23A3A;
.container .inner,
.container .img{
width: 100
height: 100
.container .title{
height: 20
line-height: 20
text-align:
font-size: 14
.container .break-li{
height: 0;
width: 100%;
&div class="container"&
&ul class="clearfix"&
&div class="inner"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&div class="inner"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&div class="inner"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&div class="inner"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&div class="inner"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&div class="inner"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&div class="inner"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&div class="inner"&
&p class="img"&&img src="/100x100" alt=""&&/p&
&p class="title"&&a href="#"&标题名称&/a&&/p&
&li class="break-li"&&/li&
&/html&这种方法工程量比较大，结果如下图：
上面说的例子是前端开发中遇到最多的情况，处理的方式也多种多样，并不局限于以上2种。前端开发中要处理的排版是比较多的，上下排版最简单，左右排版比较麻烦一点，均匀分布、错位排版是最难处理的，我们需要处理和计算各种宽度，这是一个很繁重的过程。二、什么是flex在这种情况，CSS3的flex属性应运而生了。它的作用是能够按照设置好的规则来排列容器内的项目，而不必去计算每一个项目的宽度和边距。甚至是在容器的大小发生改变的时候，都可以重新计算，以至于更符合预期的排版。不仅解放了计算器，而且更加优美的服务于响应式设计。在使用了flex属性之后，居左对齐、居右对齐、两端对齐、居中对齐、顶端对齐、底部对齐，以及处理项目之间的空白和项目宽度、高度的伸缩都可以简单的设置到。flex的字面意思是，伸缩性的、弯曲的，引申含义为可自由配置的、灵活的意思。CSS3中的flex属性也是这么理解，具有flex属性的容器和容器内的项目都具有弹性计算的能力，以至于符合预定的规则。三、flex属性flex是display的属性值，目前还处于草稿状态中，所以在书写的时候，需要加上各个浏览器的私有前缀，即-webkit、-moz、-ms、-o等，下面的例子都省略了前缀。flex属性的命名可谓是一波三折：2009年以前：display:2011年：display:flex-2012年：display:目前的格式为：
.container{
display: -webkit-
display: -moz-
display: -ms-
}1、流动布局
一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器，伸缩容器的子元素被称为伸缩项目，这些子元素使用伸缩布局模型来排版。与布局计算偏向使用书写模式方向的块布局与行内布局不同，伸缩布局偏向使用伸缩流的方向。「flex-flow」的值决定了这些术语如何对应到物理方向（上／右／下／左）、物理轴（垂直／水平）、物理大小（宽度／高度）。——来自 详细说明如下：主轴、主轴方向：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是「width」或「height」属性，由哪一个对着主轴方向决定。侧轴、侧轴方向：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。
注意：CSS的columns在伸缩容器上没有效果。float、clear和vertical-align在伸缩项目上没有效果。
2、flex容器属性2.1、display（应用于flex属性）flex：相当于blockinline-flex：相当于inline-block2.2、flex-direction（流动布局的主轴方向）row（默认）：行方向，在“ltr”（left-to-right）排版方式下从左向右排列；在“rtl”（right-to-left）排版方式下从右向左排列。row-reverse：行反方向，与row排列方向相反。在“ltr”（left-to-right）排版方式下从右向左排列；在“rtl”（right-to-left）排版方式下从左向右排列。column：列方向，与行方向垂直。在“ttb”（top-to-bottom）排版方式下从上向下排列；在“btt”（bottom-to-top）排版方式下从下向上排列。column-reverse：类似于row-reverse，与column排列方向相反。在“ttb”（top-to-bottom）排版方式下从下向上排列；在“btt”（bottom-to-top）排版方式下从上向下排列。2.3、flex-wrap（流动布局的侧轴方向）nowrap（默认）：无侧轴，即不换行。wrap：侧轴垂直于主轴。在“ltr”、“rtl”排版方式下，侧轴方向向下；在“ttb”、“btt”排版方式下，侧轴方向向左。wrap-inverse：与wrap属性相反。2.4、flex-flow（“flex-direction”和“flex-wrap”属性的缩写）row nowrap为其默认属性值，分别表示flex-direction和flex-wrap属性。2.5、justify-content（主轴方向内容对齐方式）flex-srart（默认）：与主轴起始方向对齐。flex-end：向主轴终点方向对齐。center：向主轴中点方向对齐。space-between：起始位置向主轴起始方向对齐，终点位置向主轴终点方向对齐，其余位置向主轴中点方向对齐。space-around：与space-between类似，只是起始位置和终点位置保留一半空白。以上描述，参考下图：
2.6、align-content（多个主轴沿侧轴方向的内容堆栈对齐方式）flex-start：多个主轴沿侧轴起始方向对齐。flex-end：多个主轴沿侧轴终点方向对齐。center：多个主轴沿侧轴中点方向对齐。space-between：第一个主轴沿主轴起始方向对齐，末尾主轴沿主轴终点方向对齐，其他主轴均匀分布对齐。space-around：与space-between类似，只是侧轴起始位置和侧轴终点位置保留一半空白。stretch（默认）：伸缩多个主轴，保持侧轴方向统一距离。以上描述，参考下图：
2.7、align-items（侧轴方向内容对齐方式）与justify-content类似，只是这里的参考方向为侧轴。stretch（默认）：在侧轴方向拉伸每个项目，使每个项目保持相同的起始位置和终点位置。flex-srart：与侧轴起始方向对齐。flex-end：向侧轴终点方向对齐。center：向侧轴中点方向对齐。baseline：在侧轴上保持基线对齐，以第一个项目的基线为准。以上描述，参考下图：
3、flex项目属性3.1、order（排序）整数，默认为0，负无穷到正无穷。容器中的项目都是依order值从小到大排列，order值越大越就越在主轴方向的末尾。比如：3.2、flex-grow（空白空间分配比例）大于0的正数值。3.3、flex-shrink（项目空间分配比例）大于0的正数值。3.4、flex-basis（项目的主轴方向长度）如果项目制定了实际长度，则此长度为主。否则为自动计算长度。默认为auto。3.5、flex（flex-grow、flex-shrink和flex-basis三个属性的简写）格式为：flex: none | [
]3.6、align-self（项目在侧轴方向的对齐方式）参考于容器的align-items（2.7）。四、更多阅读flex详细实例：。flex样式类：五、参考资料文章声明：文章正文已结束，感谢阅读。本文系作者原创，如需转载请注明文章来源（
），不胜感激。文章标题：
文章链接：
文章分享：
相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css相同标签：css35328523712712412011411097723302191942281246841235471083879946879018769946616264480126612701284128612931300130213171321132115341540202017197994681447271355616502947020如果原先没有 HTML 和 CSS 的基础，可以直接学 HTML5 和 CSS3 吗？
按投票排序
因为 HTML5 是 HTML 的超集，CSS3 是 CSS 的超集，且只是一种相对有限的扩展，并非截然不同的开发思想，所以无论直接学还是跳过学，都是绕不开的。
其实这个问题本身就不是很大的问题，直接学习HTML5和CSS3是可以的，但是学HTML和CSS也花不了多少时间，半个月足以，下几个模板，再用半个月动手写写DIV+CSS，基础的东西几乎就可以掌握了
可以直接学习，但是现阶段html5并不普及的情况下，在外面做项目多半还是html5以前的技术。而且html5的优势在于web应用和高清视频，这些都需要比较好的游戏及网页编程基础，直接上手，只怕是只能学些html5的皮毛。后续还是必须重新向下学习的。
我觉得可以直接学，在任何一本比较好的HTML5和CSS3的书中，一定会通过条件注释以及浏览器扩展告诉读者，怎样在现阶段最大限度利用HTML5和CSS3，并且可以在不支持的浏览器取得可以接受的显示效果。因此即使做基于现在的项目，也完全可以采用。另外，我觉得，如果是新入门者，学习之前的HTML和CSS你始终难以在短期内超越现在的业内人士，而学习HTML5和CSS3，由于现在大家都不是很熟悉，因此更有机会脱颖而出。
当你登上顶峰之前，你需要慢慢攀越横在它之前的小山峰。当然你也可以选择一条更快的路，比如说直接坐飞机，但你所需要付出的只会更多。
HTML5和CSS3都是HTML和CSS的进一步发展和完善，为了适应互联网的新需求。所以单从学习来说的话，是可以直接学的。但是知识在应用的时候要考虑的东西就很多，比如在中国普遍用IE的情况下，特别是低版本IE对HTML5和CSS3的支持效果不怎么好甚至就不支持，回头还是要学习的一些基础的东西。跳不开基础的东西。如果打算专精的话可以在基础掌握良好的情况下专注学习。
都是要学的，所谓HTML 5、CSS 3只是一个升级，扩展.
其实看你自己，你认为没基础可以学，就可以， 你认为没基础不能学。就算再简单你也学不会
可以学，但是学的成本很高，就像小孩，还不会走路，你是可以叫他跑，但是结果就是全身是伤。你懂的。
从HTML5+CSS3开始学跟在前面版本的开始学其实一样，基础的东西是逃不过的。
当然可以，HTML5和CSS3其实就是HTML和CSS的超集，HTML与HTML5（CSS与CSS3）并不是两种截然不同的技术，后者只是前者的进化版而已，因此你学习HTML5的过程其实就是在学习HTML（CSS与CSS3亦然）。不过个人建议还是先打打HTML和CSS的基础先，毕竟很多资料和教程都是以你懂HTML与CSS为条件作为教学的，许多基础概念说的模拟两可，不好看懂。而且，当你把HTML与CSS的基本概念搞清楚了，HTML5与CSS3对你而言根本不是什么新鲜玩意，无非就是多了一些好玩的东西，让开发变得更简单更有趣罢了。而在现实开发过程中，旧有技术至少占了一半左右，HTML5和CSS3新增的玩意也仅仅是新增而已，并没有覆盖掉原来的基础内容，从我个人感觉来说，HTML5+CSS3与HTML+CSS两者完全没有区别
个人亲身经历，还是从基础的学起最好，代码这种东西，往后越来越复杂，基础不牢固你学更高一级代码只会更吃力。一口吃不成胖子，掌握基础往后事半功倍！
....没有编程基础
能学编程吗
只要保持足够的信心和学习动力 就可以学好我现在已经过了2遍W3c了 ，正在看视频！
需要循环渐进，量得积累。css3_教程_完整教学详解_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者
评价文档：
css3_教程_完整教学详解
大小：1002.00KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> CSS3教程-DIV CSS3教程栏目本栏目主要提供的是网站给大家总结的基础知识-DIV CSS3教程。其实CSS3是在CSS2版本上新增一些样式而已，其原来的样式基础、语法、结构不变（比如宽度、高度、浮动等样式未变使用方法也不变，一定程度上说会div css布局稍加了解CSS3，使用一次两次CSS3样式即可掌握了解CSS3），接下来就通过此CSS3栏目内容了解学会CSS3布局。&DIVCSS5提示：学习CSS3前是需要先学习CSS2基础、语法、用法。学会了CSS2（大家都使用DIV CSS）布局，自然了解CSS3即会CSS3。此CSS3教程栏目给大家总结在CSS2基础上新增常用CSS3样式。使用CSS3还需要注意低版本IE浏览器（IE6-IE8）的不兼容支持情况，适当按需使用。• (被访问 8662 次)• (被访问 6552 次)• (被访问 6545 次)共 1页3条记录
我要分享到：必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 最新文章NEWS• • • • • • • • • • CSS EFFECTS热点文章HOT
学习与资源分享平台15种基础的可以直接使用的CSS3样式 | TYStudio-专注WEB前端开发
You might also like