一个更简洁的制作智能布局的现代语法。

FlexBox (收缩的盒子)不禁让人联想到响应式布局,事实上正是如此,它提供一种智能、自动调整、灵活分配的布局方式。

Flex是什么

.d{
    border: solid 1px red;
}
.d1{
    width: 200px;
    height: 200px;
    background-color:blanchedalmond;
    margin: 40px;
}

<div class="d">
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
</div>

以上这段代码呈现的效果是这样的:

1

如果我将外面的div改为Flex容器的话。

.d{
    display: flex;/**修改div为flex容器*/
    border: solid 1px red;
}

那么布局就会变成这样:

2

这个效果就像是float一样,并且,如果我将浏览器窗口进行缩放,还会发现:
3-1

是的,正如你看到的那样,为了保证子div元素能显示完全,flex容器会对子div自动进行了压缩,并且所有的子div的margin依然还保持在40px,当然,如果我拉伸放大窗口的话,所有的子元素是靠左排列的。

4

这就是flex容器的基本特性,灵活,智能,简洁,并且可以将任何元素作为一个flex容器,这时候需要注意的是,它的子元素就会变成flex items。

Flex容器属性
flex容器除了默认的基本特性之外,还拥有一些其它的可使用的属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction
flex-direction控制着在flex容器中的flex items排列的方式。

/*.d是flex容器*/
.d{
    flex-direction: row;/*默认水平排列*/
    flex-direction: column;/*垂直排列*/
}

row
5

column
6

flex-wrap
flex-wrap属性控制着flex容器是否允许flex items多行排列和flex items多行排列的方式。

/*.d是flex容器*/
.d{
    flex-wrap: nowrap;/*默认不允许多行排列*/
    flex-wrap: wrap;/*允许多行排列*/
    flex-wrap: wrap-reverse;/*允许多行反向排列*/
}

nowrap
7

wrap
8

wrap-reverse
9

flex-flow
flex-wrap属性是flex-directionflex-wrap两个属性合并的简写

/*.d是flex容器*/
.d{
   flex-flow: row wrap; 
}

.d{
   flex-direction: row;
   flex-wrap: wrap;
}

上面的两个样式的属性是一样的,所以:

flex-flow:flex-direction值 flex-wrap值

justify-content
justify-content控制着flex容器中的flex items的对齐方式。

/*.d是flex容器*/
.d{
    justify-content: flex-start;/*默认让所有Flex items左对齐*/
    justify-content: flex-end;/*让所有Flex items右对齐*/
    justify-content: center;/*让所有Flex items居中对齐*/
    justify-content: space-between;/*两边靠边,间距相等*/
    justify-content: space-around;/*让所有Flex items外边距相等*/
}

flex-start
10
flex-end
11
center
12
space-between
13
space-around
14

align-items
align-items属性控制了flex容器中的flex items垂直对齐方式和高度

/*.d是flex容器*/
.d{
    align-items: stretch;/*默认,让所有的flex items和flex容器高度相等*/
    align-items: flex-start;/*让所有Flex items顶部对齐*/
    align-items: flex-end;/*让所有Flex items底部对齐*/
    align-items: center;/*让所有Flex items居中对齐*/
    align-items: baseline;/*让所有Flex items沿着自己的基准线对齐*/
}

stretch
15
flex-start
16
flex-end
17
center
18
baseline(基准线为红线)
19

align-content
align-content属性用于多行的Flex容器。它也是用来控制Flex items在Flex容器里的排列方式,排列效果和align-items值一样。

/*.d是flex容器*/
.d{
    align-items: stretch;/*默认,让所有的flex items和flex容器高度相等*/
    align-items: flex-start;/*让所有Flex items顶部对齐*/
    align-items: flex-end;/*让所有Flex items底部对齐*/
    align-items: center;/*让所有Flex items居中对齐*/
}

Flex items属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis

order
order可以对flex items进行顺序的排列,所有的flex items的order默认都是0,所以flex items会按照元素的前后顺序进行排列,如果改变flex items的order,使之为1,则元素优先往后面排列,如果order小于0,则元素优先往前面排列。

/*.d是flex items*/
.d :nth-child(1){
    order: 1;/*改变第一个flex item的order为1*/
}

效果
20

/*.d是flex items*/
.d :nth-child(2){
    order: 1;/*改变第二个flex item的order为1*/
}

效果
21

/*.d是flex items*/
.d :nth-child(1){
    order: 1;/*改变第一个flex item的order为1*/
}
.d :nth-child(2){
    order: 1;/*改变第二个flex item的order为1*/
}

两个flex item的order都为1,默认按照元素的前后顺序排列
22

/*.d是flex items*/
.d :nth-child(3){
    order: -1;
}
.d :nth-child(4){
    order: -1;
}

当两个flex item的order为-1的时候
23-1

flex-grow和flex-shrink
flex-grow和flex-shrink控制着flex items在flex容器空间富裕时和空间不足时如何缩放。

在flex容器中放两个默认属性的flex item
24

当我设置第二个item的flex-grow为1时

/*.d是flex item*/
.d :nth-child(2){
    flex-grow: 1;
} 

效果
25

同理当我设置第1个item的flex-grow为1时

/*.d是flex item*/
.d :nth-child(1){
    flex-grow: 1;
} 

26

两个item的flex-grow都为1时

/*.d是flex item*/
.d :nth-child(1){
    flex-grow: 1;
} 
.d :nth-child(2){
    flex-grow: 1;
} 

27

默认情况下,当你flex items填满flex容器的时候,你对flex容器拖动缩小,flex items也会跟着缩小,这也就意味着flex-shrink在默认情况下是打开的,它的默认值是1.

flex-basis
flex-basis决定着flex items的初始大小,它的默认值是:auto
当我不设置flex item的大小的时候,flex item会根据它里面的内容和flex容器的大小自动调节本身的大小。

.d :nth-child(1){
    flex-basis: auto;/*默认值*/
} 

28
当然,我们也可以手动调节flex items的大小,flex-basis的值也可以为:px、em、rem、%

.d :nth-child(1){
    flex-basis: 200px;
} 

flex
flex是flex-grow、flex-shrink和flex-basis三个属性的简写

.item{
    flex:0 1 auto;
}

等于

.item{
    flex-grow:1;
    flex-shrink:0;
    flex-basis:auto;
}

flex实现等分网格

.d :nth-child(1){
    flex: 1 1 auto;
}
.d :nth-child(2){
    flex: 2 1 auto;
} 
.d :nth-child(3){
    flex: 3 1 auto;
} 
.d :nth-child(4){
    flex: 4 1 auto;
} 

flex容器被分成10份,每个flex item根据flex-grow的数字进行划分
29

参考来源【理解Flexbox:你需要知道的一切】