web前端入门到实战：CSS flex布局入门

都知道html正常的文档流是自上而下排列的，块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly：inline-block、float、position完成排版，但是需要对距离进行计算，计算起来十分麻烦。2009年W3C提出了一种新的方案–引入了弹性布局flex方式，通过容器的轴线来排列项目，简直是移动端开发的福音（虽然grid布局更牛x，后面会总结）。自己也用了挺久的，但是有些参数记忆很模糊，每次用都要去百度一下，干脆自己总结一下吧。上面是一个让项目水平垂直居中的两种写法，可以看到写法简洁很多，而且直接写在容器上就行，不需要考虑具体的项目。那么，什么是flex尼？借用阮一峰老师的一张图来看一下flex的一些概念：1、flex container（容器）：使用flex的元素就叫做容器，容器默认存在2条轴线，主轴线（main axis)和垂直的交叉轴线(cross axis)。轴线开始的位置被叫做main/cross start，结束的位置被叫做main/cross end。项目是沿着主轴线开始、结束方向排列的。2、flex item（项目）：容器内部的直属第一层元素就叫做项目。flex容器的属性有很多，下面主要看几个常用的：用来设置容器的主轴方向和主轴线的起点。有如下4个属性值，结果如下图。用来设置如果一条轴线上排满了是否换行，是否在来一条轴线，有3个属性值。还有个flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，取值分别是flex-direction的属性值和flex-wrap的属性值。
默认值为flex-flow:row nowrap。用来设置项目在主轴方向的排列方式。用来设置项目在交叉轴上的排列对齐方式。用来设置多轴线的在交叉轴线上的对齐方式，只对多轴线起作用。除了对容器进行设置，对项目本身也可以进行设置。定义项目的位置，默认值都为0，值越小越靠前。所以要想不改变其他项目的同时，往前面移动该项目，需要设置成负数。用来定义项目的放大比例，也就是对剩余空间的分配能力。默认值是0，表示不参与分配。如果是2则表示比1的多分配1倍。定义项目的缩小比例，如果项目空间不足，将会默认缩小，默认值为1.设置为0则不会缩小，负数无效等价于1。如果设置成2时，压缩效果翻倍。定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。感觉没什么卵用…flex-grow、flex-shrink、flex-basis三个属性的缩写。用来免费云主机、域名设置单个项目交叉轴上的对齐方式，能覆盖align-items的属性值。默认值为auto，其他值则与align-items相同。flex布局是不是简单又实用，理解容器、项目、主轴线、交叉轴线这几个概念后就上手实用吧！

相关推荐: DIV+CSS定义及优势有哪些

本篇内容主要讲解“DIV+CSS定义及优势有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“DIV+CSS定义及优势有哪些”吧! 　　Div+css 是一种目前比较流行的网页布局技术 　　Div 来存放需要显示的…