快速掌握flex布局

2019-11-01 本文已影响0人 seporga

前言

flex布局简化了前端布局问题，例如垂直居中，水平居中等，且目前为止主流浏览器都支持了这种布局，特别是移动端的浏览器，支持度更好。下面是在can i use上查询的结果。从查询的结果来看，支持IE10及以上浏览器，移动端几乎全线支持！

image.png

一、flex布局是什么？

flex布局意思是“弹性布局”，块级元素和行内元素都可以设置为flex布局。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  ...
</div>

块级元素设置flex布局

.flex-container{
   display:flex;
   display: -webkit-flex; /* Safari */
   display: -ms-flex; /* IE10+ */
}

行内元素设置flex布局

.flex-container{
   display:-webkit-inline-box;
   display:-ms-inline-flexbox;  /* IE10+ */  
   display:inline-flex;  /* Safari */
}

二、flex布局基本概念

flex布局一般包含容器(flex-container)和若干个子元素（flex-item），布局上分为主轴和交叉轴。默认情况下，水平方向为主轴，垂直方向为交叉轴，可以通过设置flex-direction切换主轴和交叉轴（稍后会讲解如何切换）。flex布局的属性比较多，但可以归类为 容器属性 和 子元素属性，教程会先讲解容器的属性，然后讲解子元素的属性，这样比较容易理解和记忆！

图片来源于网络，侵权请告知删除

三、flex容器的属性

flex有6个属性可以设置，它们分别是：

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

3.1 flex-direction属性

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

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

row(默认值)，水平方向为主轴，垂直方向为交叉轴，起点在左边。

image.png

row-reverse: 水平方向为主轴，垂直方向为交叉轴，起点在右边。

image.png

column，垂直方向为主轴，水平方向为交叉轴，起点在上边。

image.png

column-reverse，垂直方向为主轴，水平方向为交叉轴，起点在下边。

image.png

initial，初始值，和默认值效果一样，这里不再贴图。
inherit，继承父容器的值，主要在嵌套使用flex布局会用到，父容器设置什么，它就是什么，效果和上面的其中一种相同，这里不再贴图

3.2 flex-wrap属性

DOM结构

<div class="flex-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 class="flex-item">8</div>
</div>

CSS样式

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

nowrap(默认值)，即使子元素总宽高超出也不换行（列）。

image.png

wrap，当子元素总宽高超出时自动换行（列）。

image.png

wrap-reverse，换行，第一行在下方（列的情况自行探索，不再贴图）。

image.png

initial、inherit的效果和上面介绍的一样，不再赘述！

3.3 flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，用于设置或检索弹性盒模型对象的子元素排列方式。flex-direction 属性规定方向， flex-wrap 属性规定是否拆行或拆列。

DOM结构

<div class="flex-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 class="flex-item">8</div>
</div>

CSS样式

.flex-container{
  display:flex;
  flex-flow: flex-direction flex-wrap  | initial | inherit;
}

row wrap，表示水平方向，超出换行。

image.png

row nowrap，表示水平方向，超出不换行。

image.png

其他情况也是一样的，就是 flex-direction 和 flex-wrap 组合，这里不做过多赘述。

3.4 justify-content属性

justify-content属性用于设置主轴上元素的排列方式。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

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

flex-start（默认值），子元素靠容器开头排列。

image.png

flex-end，子元素靠结尾排列。

image.png

center，子元素居中排列。

image.png

space-between，两端对齐，子元素之间的间隔相等。

image.png

space-around，子元素的两边间隔相等。

image.png

3.5 align-items属性

justify-content属性用于设置交叉轴上元素的排列方式。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

.flex-container{
  display:flex;
  height: 300px; /* 设置高度，才能看到效果 */
  align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
}

stretch (默认值)，子元素被拉伸以适应容器（1和2设置了高度，3没有设置高度，下同）。

image.png

center ，子元素在交叉轴上居中对齐。

image.png

flex-start 子元素在交叉轴上靠起始边对齐。

image.png

flex-end 子元素在交叉轴上靠结束边对齐。

image.png

baseline 子元素在交叉轴上根据字体的baseline对齐（1、2、3字体大小分别为20px、40px、60px）。

image.png

3.6 align-content属性

align-content规定flex-container有剩余空间时，如何分配给子元素。这个属性设置的是所有子元素的对齐方式，需要设置flex-wrap(wrap或wrap-reverse)，并且指定flex-container的高度（或宽度）才会生效。

DOM结构

<div class="flex-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 class="flex-item">8</div>
</div>

CSS样式

.flex-container{
  display: flex;
  background: #eeeeee;
  align-content: center;
  height: 300px;
  flex-wrap: wrap | wrap-reverse;
  align-content:  stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
}

stretch(默认值)，子元素被拉伸以适应容器（临时去掉了flex-item的高度）。

image.png

center，子元素（整体）在交叉轴上居中对齐（恢复flex-item的高度为100px，下同）。

image.png

flex-start，子元素（整体）向交叉轴起始位置对齐。

image.png

flex-end，子元素（整体）向交叉轴结束位置对齐。

image.png

space-between ，子元素行（列）向交叉轴两边对齐（建议亲自尝试，文字功底不好，描述得不好~）。

image.png

space-around ，子元素行（列）两边均分容器剩余空间（建议亲自尝试，文字功底不好，描述得不好~）。

image.png

四、子元素（容器）的属性

flex子属性有6个属性可以设置，它们分别是：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

DOM结构

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">-1</div>
    <div class="flex-item">0</div>
    <div class="flex-item">未设置order</div>
</div>

CSS样式

.flex-container{
  display:flex;
}
.flex-item{
  order: number | initial | inherit;
}

number，可以设置任意数字，数字越小越靠前（和DOM的位置无关）。

image.png

4.2 flex-grow属性

flex-grow属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大；

DOM结构

<div class="flex-container">
  <div class="flex-item">0</div>
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
}
.flex-item {
  flex-grow: flex-grow: number | initial | inherit;
}

number，可以设置任何大于等于0的数字，数字越大，分到的剩余空间比例就越大。

image.png

4.3 flex-shrink属性

flex-shrink属性定义了子元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效；

DOM结构

<div class="flex-container">
  <div class="flex-item">0</div>
  <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>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
}
.flex-item {
  background: #b48882;
  flex-shrink: number | initial | inherit; 
}

number，数值越大，缩小比例就越大。

image.png

4.4 flex-basis属性

flex-basis属性用于设置子元素的伸缩基准值，默认值为auto，即元素本身的大小。如果子元素同时设置宽高和flex-basis属性，flex-basis的优先级更高。

DOM结构

<div class="flex-container">
  <div class="flex-item">width:100px</div>
  <div class="flex-item">flex-basis: 200px;</div>
  <div class="flex-item">flex-basis: 300px;</div>
  <div class="flex-item">flex-basis: 400px;</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
}
.flex-item{
  flex-basis: auto | number | initial | inherit;
}

number，子元素设置的数值越大，占用剩余空间的比例越大。

image.png

4.5 flex属性

flex属性是flex-grow、flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。flex支持缩写，例如经常用到的：flex: 1，等价于flex: 1 1 0%。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
}
.flex-item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 5px;
  flex: flex-grow [flex-shrink] [flex-basis]  | auto | none | 1 | 0 | initial | inherit;
}

flex:1，等价于flex: 1 1 0%

image.png

flex: 0，等价于 flex: 0 1 0%

image.png

flex: auto ，等价于flex: 1 1 auto

image.png

flex: none，等价于flex: 0 0 auto

image.png

当取值为一个具体值或百分比时，例如：flex: 0%等价于flex: 1 1 0%，设置的是flex-basis的值

image.png

当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，例如：flex:2 3 等价于flex 2 3 0%（下图给第一个子元素设置flex:2 3）。

image.png

当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1。例如：flex: 2 200px 等价于 flex: 2 1 200px（下图给第一个子元素设置flex:2 200px）。

image.png

4.6 align-self属性

align-self 允许单个子元素设置与其他项目不一样的对齐方式，默认值：auto。
DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
  height:300px;
}
.flex-item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 5px;
  align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}