宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

一、flex-direction属性

1、该属性表示主轴的方向，默认为水平方向。可以设置为row（水平方向）、

column（垂直方向）、row-reverse（水平方向反向）和column-reverse（垂直方向反向）

.container {
  display: flex;
  flex-direction: column;
}

2、该属性可以用于控制子元素排列顺序，比如设置为row-reverse时，子元素的排列方向与HTML源码顺序相反。

.container {
  display: flex;
  flex-direction: row-reverse;
}

二、justify-content属性

1、该属性表示主轴上的对齐方式，默认为flex-start。可以设置为flex-end（靠主轴末端对齐）、center（居中对齐）、space-between（两端对齐，子元素间距相等）和space-around（每个子元素周围都留有空白间隔）

.container {
  display: flex;
  justify-content: space-between;
}

2、对于垂直方向的排列，设置align-items属性，对于水平方向的排列，设置justify-content属性。

.container {
  display: flex;
  align-items: center;
}

三、align-items属性

1、该属性表示侧轴的对齐方式，默认为stretch。可以设置为flex-start（靠侧轴起始端对齐）、flex-end（靠侧轴末端对齐）、center（居中对齐）和baseline（根据子元素文本基线对齐）

.container {
  display: flex;
  align-items: center;
}

2、该属性可以用于控制单个元素在交叉轴上的对齐方式，可以通过设置子元素自身的align-self属性实现。

.item {
  align-self: flex-end; 
}

四、flex-wrap属性

1、该属性表示子元素换行方式，默认为nowrap不换行，可以设置为wrap（在必要时分行）和wrap-reverse（在必要时分行，但是按照逆序排列）

.container {
  display: flex;
  flex-wrap: wrap;
}

2、该属性可以用于在较窄的屏幕中优化布局，防止子元素溢出屏幕。

@media screen and (max-width:600px) {
  .container {
    flex-wrap: wrap;
  }
  .item {
    width: 100%;
  }
}

五、flex-grow属性

1、该属性表示子元素在空间上的增长比例，默认为0，即不会增加宽度或高度。如果所有子元素的该属性都为1，则所有子元素会等分剩余空间。

.item {
  flex-grow: 1;
}

2、该属性可以用于控制子元素在父容器中的比例，比如顶部导航栏和主体内容的布局。

.container {
  display: flex;
  flex-direction: column;
}
.nav {
  flex-grow: 1;
}
.main {
  flex-grow: 2;
}

六、flex-shrink属性

1、该属性表示子元素在空间不足时的缩小比例，默认为1。如果所有子元素的该属性都为0，则所有子元素会等分缩小空间。

.item {
  flex-shrink: 1;
}

2、该属性可以用于控制子元素在父容器中的比例，比如左侧导航栏和右侧广告的布局。

.container {
  display: flex;
  flex-direction: row;
}
.nav {
  flex-shrink: 1;
}
.ad {
  flex-shrink: 2;
}

七、flex-basis属性

1、该属性表示子元素在主轴上的初始尺寸，可以设置为一个具体的尺寸比如100px，也可以设置为auto自动伸缩。该属性与width和height的区别在于，width和height只在父元素尺寸固定的情况下才能生效，而flex-basis可以在父元素尺寸不确定的情况下使用。

.item {
  flex-basis: 100px;
}

2、该属性可以用于控制子元素在父容器中的尺寸，特别是在父容器尺寸不确定的情况下。

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-basis: 25%;
}

八、flex属性

1、该属性是flex-grow、flex-shrink和flex-basis三个属性的简写形式。默认值为0 1 auto，即不自动增长或缩小，自动设置初始尺寸。

.item {
  flex: 1; /*相当于flex-grow: 1; flex-shrink: 1; flex-basis: auto;*/
}

2、该属性可以用于快速设置子元素在父容器中的比例和初始尺寸。

.item {
  flex: 2 1 200px; /*相当于flex-grow: 2; flex-shrink: 1; flex-basis: 200px;*/
}

九、align-content属性

1、该属性表示多行子元素的对齐方式，默认为stretch。可以设置为flex-start（靠侧轴起始端对齐）、flex-end（靠侧轴末端对齐）、center（居中对齐）、space-between（两端对齐，子元素间距相等）和space-around（每个子元素周围都留有空白）

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

2、该属性可以用于控制多行子元素的对齐方式，比如产品展示页面中的商品列表。

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-between;
}