一步一步教你CSSFlex布局

前言在做项目之前，我对布局的研究并不多。很多页面能用定位就用定位，能用百分比就用百分比。结果，很多地方似乎都对齐了。但是很别扭，这几天被一个布局折磨了好久。于是我痛定思痛，总结了自己的思想问题。以前没有把CSS相关的问题当回事，总是想当然的认为只要用到样式，随便百度一下就可以了。这种想法带来的后果就是页面样式很死板，不同分辨率的显示适配很不好，而且我写页面的时候也很莫名其妙。明明写的是某种风格，却行不通。到头来，我还是跟自己过不去。感觉和我想法一样的同学肯定不少，不过没关系，可以改正错误，也没什么好说的。先从Flex入手，了解一下布局，可以解决很多样式的烦恼。1.基本原理英文的Flex是弯曲、屈曲和伸展的意思，是一种可扩展的布局，是为适应不同的分辨率而生的。而且用法也很简单。首先，告诉浏览器我是一个灵活的布局。.faBox{显示：'flex';//设置父元素为灵活布局.sonBox1{...}.sonBox2{...}}设置好Flex后，会有如下关系图，我们一一看。2.设置显示的容器属性：flex；是容器。上图中faBox是容器，所以containerproperties要写在containerproperties中。2.1flex-direction属性从英文意思理解属性，翻译为拉伸方向，该属性可以设置主轴的方向，有六个值。.faBox{弹性方向：行|行反转|栏目|列反转|初始|根据英文意思就可以知道了。initial的意思是“初始”。它是CSS提供的关键字。它可以用在很多地方。可以快速设置一个属性的默认值，方便快捷。inherit是“继承”的意思，可以从父元素继承属性。2.2flex-wrap属性从中文意思来看，这个东西应该是控制换行的。.faBox{flex-wrap:nowrap|包装|wrap-reverse;}2.3flex-flow属性该属性是flex-wrap和flex-direction的简写。.faBox{flex-flow:||;}2.4justify-content属性该属性负责主轴对齐。.faBox{调整内容：flex-start|弹性端|中心|间隔|space-around;}2.4align-items属性这个属性负责横轴的对齐（垂直居中就是靠它实现的，很简单，面试题）。2.5align-content属性设置多主轴时的对齐方式。如果只有一个轴，它将不起作用。.faBox{对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}3.Item属性3.1order属性order是英文order的意思，这个属性可以设置item的排列顺序，从大到大。.sonBox1{order:;}3.2flex-grow属性定义item的放大比例，默认为0，不参与放大。.sonBox1{flex-grow:;/*default0*/}3.3flex-shrink属性定义项目缩放。.sonBox1{flex-shrink:;/*default1*/}3.4flex-basis属性属性定义分配多余空间前item占用的主轴空间。.sonBox1{flex-shrink:;/*default1*/}3.5flex属性（推荐）flex-grow、flex-shrink和flex-basis的简写。.sonBox1{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}3.6align-self属性可以为子元素设置单独的对齐方式。为auto时，继承父元素的align-item.sonBox1{align-self:auto|弹性启动|弹性端|中心|基线|拉紧;}