一劳永逸 搞定Flex布局

FlexBox布局

弹性盒模型（The Flexible Box Module）,又叫Flexbox (flexible box)，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。

Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间；

Flexbox在布局中能够更简化解决什么问题？例如浮动布局、屏幕的适配、水平和垂直居中、自动分配宽度。

main axis(主轴): flex 容器的主轴， flex item 沿着主轴排布，注意主轴不一定是水平的，主轴是水平还是垂直取决于 flex-direction 属性。

cross axis (交叉轴): 垂直于主轴的轴线，其方向取决于主轴方向。

main size:  flex item 占据主轴的宽度或高度。 flex item 的main size属性是要么是“宽度”，要么是“高度”，这取决于主轴方向。

cross size:  flex item 占据交叉轴的宽度或高度。 flex item 的cross size属性是要么是“宽度”，要么是“高度”，这取决于交叉轴方向。

main-start|main-end: 分别表示主轴的开始位置和结束位置， flex item 在容器中会从main-start到main-end排布。

cross-start|cross-end: 分别表示交叉轴的开始位置和结束位置。 flex item 在交叉轴上的排布从cross-start开始位置到cross-end结束位置。

理解了基本概念,下面带大家一起来了解Flex布局父容器的6大属性

开启Flex布局

想使用Flex布局, 首先要将父容器设置成Flex容器

<div class="container"></div>
.container {
  display: flex | inline-flex;
}

这样可以分别设置父容器为块状flex容器或行内flex容器,接下来就可以开启父容器属性学习之旅了

父容器属性

父容器有以下六大属性：

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

 1. flex-direction 

<div class="container">
  <div class="flex-item"> 1 </div>
  <div class="flex-item"> 2 </div>
  <div class="flex-item"> 3 </div>
</div>
.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

实现效果：

设置flex-item以左侧为起点从左向右横向排列可以设置row

设置项目以上沿为起点从上向下纵向排列可以设置 column

 2. flex-wrap 

flex-wrap属性表示当主轴的长度是固定并且空间不足的时候，是否可以换行。默认为no-wrap

<div class="container">
  <div class="flex-item"> 1 </div>
  <div class="flex-item"> 2 </div>
  <div class="flex-item"> 3 </div>
  <div class="flex-item"> 4 </div>
  <div class="flex-item"> 5 </div>
</div>
.container {
  display: flex;
  flex-wrap: no-wrap | wrap | wrap-reverse;
}

实现效果：

设置flex-item在主轴方向上不换行 no-wrap (*当主轴的长度是固定并且空间不足时，项目尺寸会随之进行调整，而不会换行)

设置flex-item在主轴方向上换行 wrap

flex-flow属性是将两个属性 flex-direction 和 flex-wrap 组合为简写属性 第一个指定的值为flex-direction, 第二个指定的值为flex-wrap, 默认为:flex-flow: row nowrap;该属性的书写格式如下：

.container {
  display: flex;
  flex-flow: <flex-direction> <flex-flow>;
}

 4. justify-content 

justify-content属性是Flex布局flex-item延主轴方向的对齐方式, 默认为flex-start

<div class="container">
  <div class="flex-item"> 1 </div>
  <div class="flex-item"> 2 </div>
  <div class="flex-item"> 3 </div>
</div>
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

实现效果：(以水平方向为主轴进行举例，即flex-direction: row)

设置flex-item延主轴方向左对齐可以设置 flex-start(默认对齐方式)

设置flex-item延主轴方向右对齐可以设置 flex-end

设置flex-item延主轴方向居中对齐可以设置 center

设置flex-item延主轴方向两端对齐且等间距，可以设置space-between

设置flex-item延主轴方向每个flex-item两侧间距相等，可以设置space-around；这种对齐方式也会导致每个flex-item之间的间距比flex-item距离边框的间距大一倍。

 5. align-items 

<div class="container">
  <div class="flex-item"> 1 </div>
  <div class="flex-item"> 2 </div>
  <div class="flex-item"> 3 </div>
</div>
.container {
  display: flex;
  flex-direction: row;
  align-item: flex-start | flex-end | center | space-between | space-around;
}

实现效果：(以水平方向为主轴进行举例，即flex-direction: row)

设置flex-item延交叉轴方向上对齐可以设置 flex-start(默认对齐方式)

设置flex-item延交叉轴方向下对齐可以设置 flex-end

设置flex-item延交叉轴方向居中对齐可以设置 center

设置flex-item延交叉轴方向且第一个flex-item文字基线对齐可以设置 baseline

如果项目未设置高度或设为auto,flex-item沿着侧轴被拉伸至容器的高度,可以设置 stretch

<div class="container">
  <div class="flex-item"> 1 </div>
  <div class="flex-item"> 2 </div>
  <div class="flex-item"> 3 </div>
  <div class="flex-item"> 4 </div>
  <div class="flex-item"> 5 </div>
  <div class="flex-item"> 6 </div>
  <div class="flex-item"> 7 </div>
</div>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

实现效果：(以水平方向为主轴且可以换行进行举例，即flex-direction: row;flex-wrap: wrap;)

stretch为该属性的默认值,轴线占满整个交叉轴(flex-item无固定高度)

延交叉轴开始位置开始填充设置为 flex-start

延交叉轴结束位置开始填充设置为 flex-end

与交叉轴居中点对齐设置为 center

与交叉轴两端对齐，轴线之前的间隔平均分布可设置 space-between

设置 space-around 会使每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍

以上Flex布局父容器的属性就介绍完毕了,关注「之家前端共享」, 下一篇带你了解Flex布局中子元素flex-item的属性

▼ 关注「之家前端共享」，获取更多技术干货 ▼