关于css:手把手教你CSS-Flex布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sonBox1{order: <integer>;}

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

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

定义我的项目缩放。

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

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

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

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

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

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

前言