前言

  之前做我的项目，对于布局方面没怎么深入研究过，好多页面都是能用定位就用定位，能用百分比就用百分比，导致很多中央，看似对齐了，然而就很顺当，这几天又被一个布局折磨了很久。于是痛定思痛，总结一下本人思维上的问题。

  本人之前没把 CSS 的相干问题当回事，心里总是理所应当的认为，款式什么时候用到轻易百度一下就行，这种想法的结果就是，页面格调很生硬，不同分辨率的显示器适配很差，写页面的时候，也很莫名其妙，明明我写了某个款式，就是没成果，到头来还是本人跟本人过不去。

  感觉跟我有一样想法的同学必定不少，不过不要紧，知错能改，善莫大焉。先从 Flex 开始，把布局给整明确，能解决一大堆款式麻烦。

1. 基本原理

   Flex 英文意思为，蜿蜒，屈伸，能够伸缩的布局，天生就是为了适配不同的分辨率。而且用法也很简略，首先只有通知浏览器，我是一个伸缩布局就能够了。

.faBox {
    display: 'flex'; // 给父元素设置为伸缩布局

    .sonBox1 {...}
    .sonBox2 {...}
}

设置完 Flex 之后，就会有上面的这个关系图，咱们一个一个看。

2. 容器属性

  谁被设置成了 display: flex;，谁就是容器。下面图中，faBox 就是容器，所以容器属性要写在容器属性外面。

2.1 flex-direction 属性

   从英语意思理解属性，翻译为伸缩方向，该属性能够设置主轴的方向，有六个值。

.faBox {flex-direction: row | row-reverse | column | column-reverse | initial | inherit;}

上背后四个属性别离对应以下四种状况

flex-direction 还有两个可能的取值，initial 和 inherit 依据英文意思可知。

initial 意为“最后的”，是 CSS 提供的关键字，很多中央都能应用，能够疾速设置某个属性的默认值，方便快捷。

inherit 意为“继承”，能够从父元素中继承该属性。

2.2 flex-wrap 属性

  依据中文意思来判断，这个货色应该是管制换行的。

.faBox{flex-wrap: nowrap | wrap | wrap-reverse;}

2.3 flex-flow 属性

  该属性是 flex-wrap 和 flex-direction 的简写形式。

.faBox{flex-flow: <flex-direction> || <flex-wrap>;}

2.4 justify-content 属性

  该属性负责主轴的对齐形式。

.faBox{justify-content: flex-start | flex-end | center | space-between | space-around;}

2.4 align-items 属性

  该属性负责穿插轴的对齐形式（垂直居中靠它来实现，很容易，面试常考题）。

2.5 align-content 属性

  设置多根主轴时候的对齐形式，如果只有一条轴线，不起作用。

.faBox{align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

3. 我的项目属性

3.1 order 属性

   order 英文意思秩序，该属性能够设置我的项目的排列程序，从小到大。

.sonBox1{order: <integer>;}

3.2 flex-grow 属性

  定义我的项目的放大比例，默认 0，不参加放大。

.sonBox1{flex-grow: <number>; /* default 0 */}

3.3 flex-shrink 属性

  定义我的项目缩放。

.sonBox1{flex-shrink: <number>; /* default 1 */}

3.4 flex-basis 属性

  属性定义了在调配多余空间之前，我的项目占据的主轴空间。

.sonBox1{flex-shrink: <number>; /* default 1 */}

3.5 flex 属性（举荐）

  flex-grow，flex-shrink 和 flex-basis 的简写。.sonBox1{flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}

3.6 align-self 属性

   可给子元素设置独自的对齐形式。auto 的时候是继承父元素的 align-item

.sonBox1{align-self: auto | flex-start | flex-end | center | baseline | stretch;}