详解弹性盒Flexbox

本文转自简书: https://www.jianshu.com/p/8fc2acda3e92

作者: SCQ000

 

Flexbox

背景

Flexbox 是一个CSS3新增的模块，主要可以用来方便地进行布局操作。

术语

container, 父容器

container指用于应用这个布局的容器，它的值应该为

 

.container {
  display: flex;
}

1. flex-direction: 指明了布局的方向，

 

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

包括了竖排还是横排，reverse就是做逆序排序。默认方向为从左向右，从上到下。

2.flex-wrap: 默认情况下，子元素会尽量排在一行，但是你也可以利用这个属性让其换行。

 

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

3.flex-flow: 这是flex-direction和flex-wrap的缩写形式,默认值为row nowrap

 

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

4.justify-content: 该属性主要用于控制子元素间空余空间的分布，适用于行分布的情况     /*这里个人操作并参考MDN, 实际上是定义了在当前行上，弹性项目沿主轴如何排布*/

 

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

这里给出各个属性值得意义：

属性值	作用
flex-start(默认)	子元素尽量向头部靠拢
flex-end	子元素尽量向尾部靠拢
center	子元素居中
space-between	子元素平均分布，首元素在头部，尾元素在尾部
space-around	子元素平均分布，各个元素两端都有相等的空余空间

5.align-items: 该属性控制子元素纵轴方向上排列方式      /*定义了在当前行上，弹性项目沿侧轴默认如何排布*/

 

.container {
  align-items: flex-start | flex-end |center | baseline | stretch;
}

属性值	作用
flex-start	子元素margin边缘处于容器上边缘
flex-end	子元素margin边缘处于容器下边缘
center	子元素垂直居中
baseline	子元素基线对齐
stretch(默认)	子元素收缩去填充容器，但仍然受min-width和max-width影响

6.align-content: 该属性与justify-content类似，适用于多行内容的剩余空间分配情况       /* 参考MDN,该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。 */

 

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

属性	作用
flex-start	每一行子元素尽量向容器上部分靠拢
flex-end	每一行子元素尽量向容器下部分靠拢
center	子元素居中排布
space-between	子元素平均分布，第一行在容器上部分，最后一行在容器底部
space-around	子元素每一行之间间隔相等
stretch(默认)	子元素填充容器

属性总结

这里其实你可以将flex-flow的相关属性看做是一条轴线(也是主轴main axis)，你用flex-direction来控制这条轴线的方向(横向或竖向)，而用flex-wrap来控制其子元素是否换行。而容器内的各个子元素将会沿着这条轴线进行排布。
另一方面，控制子元素布局方式的属性依据其轴线方向。主轴用justify-content,而纵轴方向用align-items和align-content，后者和水平justify-content类似，控制着每行子元素组之间的间距（可以认为行间距），而align-items就是控制子元素间的对齐方式的。

children，子元素

说完容器的属性，再来看一下子元素的属性。

1. order: 默认情况下元素之间的排列顺序是按照其在HTML文档中定义好的顺序进行排列的，不过可以通过这个属性对其进行更改。

 

.item {
  order: <integer>;
}

元素的数值会按自然数的排列顺序进行排序。

2.flex-grow: 这个属性控制元素的放大，默认值为0，不允许出现负数

 

.item {
  flex-grow: <number>;
}

容器内的各个元素大小是根据其比例进行计算的，如所有元素都是1，则元素大小就会均分，如果有一个是2，则这个元素就会比其他元素都大2倍。

3.flex-shrink: 与flex-grow类似，它是用来控制元素的缩小的，默认值为1，也是不允许出现负值。

4.flex-basis: 在分配容器剩余空间时会对元素基于此值先进行计算

 

.item {
  flex-basic: <length> | auto;
}

如果设置为0， 在内容去额外的空间不会被考虑进去，如果设置为auto，则额外的空间会基于flex-grow的值进行分配。

属性值	作用
auto(默认)	根据元素的宽高属性进行计算
content	根据元素内的内容
<length>	可以是百分比，rem等

5.flex: 这是flex-grow和flex-shrink和flex-basis的缩写形式,默认值为0，1，auto

 

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}

6.align-self: 这个属性值允许子元素复写容器的设置的align-items值。

 

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

PS：设置了flex的子元素，float,clear和vertical-align对其都不会有作用。

属性总结

针对子元素之间的属性，主要是用来设置子元素的大小而排布顺序的。其中伸缩都会根据容器的轴线进行。这样就可以很容易实现等分，1：n：1之类的布局方式了。

举个栗子🌰

在这里，举一个简单的例子，利用flexbox可以很容易地解决绝对居中的布局问题，而且代码量很少。

居中布局

 

.parent {
  display: flex;
  height: 300px;
}

.child {
  width: 100px;
  height: 100px;
  margin: auto;
}

从上面代码可以看到，将父元素display的值设置为flex后，子元素的margin值设置为auto后就自动居中了，是不是很神奇呢？

参考文档

A Guide to Flexbox

作者：SCQ000
链接：https://www.jianshu.com/p/8fc2acda3e92
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

个人总结:

先用 flex-direction 确立好主轴,才能判断以下项目的对齐方向。

justify-content 定义了在当前行上，弹性项目沿主轴如何排布。

align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。

align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

align-content :  在多行的flex中在侧轴上设置总体的对齐方式,在当行flex中不起作用，默认flex中不起作用（因为默认flex-wrap: nowrap 不换行）