快速掌握flex布局

时间 2019-11-07

标签快速掌握 flex 布局栏目 Flex 繁體版

原文原文链接

前言

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

1、flex布局是什么？

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

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布局web

.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 */
}
复制代码

2、flex布局基本概念

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

3、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

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

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

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

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

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

initial，初始值，和默认值效果同样，这里再也不贴图。flexbox
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(默认值)，即便子元素总宽高超出也不换行（列）。

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

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

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，表示水平方向，超出换行。

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

其余状况也是同样的，就是 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（默认值），子元素靠容器开头排列。

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

center，子元素居中排列。

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

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

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没有设置高度，下同）。

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

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

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

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

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的高度）。

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

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

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

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

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

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

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的位置无关）。

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的数字，数字越大，分到的剩余空间比例就越大。

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，数值越大，缩小比例就越大。

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，子元素设置的数值越大，占用剩余空间的比例越大。

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%

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

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

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

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

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

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

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;
}
复制代码

auto(默认值)，元素继承了它的父容器的 align-items 属性。若是没有父容器则为 "stretch"

stretch ，元素被拉伸以适应容器（子元素2高度设置为auto，align-self设置为stretch）。

center，元素位于容器的中心(子元素2的align-self设置为center)。

flex-start，元素位于容器的起始位置（子元素2的align-self设置为center）。

flex-end，元素位于容器的结束位置（子元素2的align-self设置为end）。

baseline ,元素以自身文字基线为对齐方式，对齐到主轴中（子元素2align-self设置为baseline ，font-size:60px;height:auto）

最后，奉献一个九宫格布局的例子：codepen.io/linlif/pen/…，效果图以下：

本文完

参考资料: 30 分钟学会 Flex 布局 Flex 布局语法教程