图文学习前端Flex布局

朴灿烈づ我的快乐病毒、 2021-07-24 15:20 325阅读 0赞

哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。

> 把你的前端拿捏得死死的，每天学习得爽爽的，关注这个不一样的程序员，如果你所学的东西 处于喜欢 才会有强大的动力支撑。
> 
> 感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩，欢迎关注加我入群vx:xiaoda0423

## 前言 ##

本篇文章进行学习`css`中的一个重点应用，布局样式为`flex`布局，相信你学习了解过`display`属性，`position`属性，`float`属性，但今天只学习新东西就是`flex`布局。

### flex布局是什么 ###

![f129a41aa784ac4e6f10e15c27aa52ba.png][]

`flex`是`flexible box`的缩写，意思是弹性布局，代码样式如下：

.box {
     display: flex;
    }

`Flexbox Layout`模块是提供一个更有效的方式来布置，对齐和`item`之间在一个容器中分配的控件，即使它们的大小是未知的，或者是动态的，所以单词命名`flex`(弹性工作制的)

`flex`布局可以使容器更改其`item`的宽度，高度，以便最好地填充可用空间，或者收缩它们来防止溢出。`flexbox`布局使用比较合适应用程序地组件和小规模布局上。

在`webkit`内核地浏览器中，要加上`-webkit`前缀哦，代码格式如下：

.box {
     display: -webkit-flex;
     display: flex;
    }

当设置`flex`布局之后，子元素（`item`）的`float`，`clear`，`vertical-align`属性会失效。

### 学习前要先了解概念 ###

![a0d322202b7f515c4ba493e89e38ab0d.png][]

> `flex container` `flex items`

设置`flex`布局的元素为`flex`容器（`flex container`），简称为容器。它的所有子元素都是容器的成员，`flex`项目（`flex item`），简称为项目。那么请查看如下图，解析`flex`布局背后的主要思想。

![c70fb1345d5d0f63d1fddbb5e6671dec.png][]

如图可以看出，`main axis`是从`main-start`到`main-end`，交叉轴`cross axis`从`cross-start`到`cross-end`。

容器默认有两根轴的，水平的主轴`main axis`和垂直的交叉轴`cross axis`，从`main-start`到`main-end`叫（`main start`）主轴；从`cross axis`从`cross-start`到`cross-end`叫（`cross axis`）交叉轴

单个项目占据的主轴空间叫`main size`，占据的交叉轴空间叫`cross size`

`container`弹性容器：

![63083b01454054c7647a5fbcdfe80637.png][]

.container {
     display: flex;
    }

`items`弹性项目:

![0eb5640f62f333a442f93114801c8083.png][]

### 容器的属性 ###

![99fc04aab8982b5b81308753fed745e7.png][]

1.  `flex-direction`
2.  `flex-wrap`
3.  `flex-flow`
4.  `justify-content`
5.  `align-items`
6.  `align-content`

> flex-direction属性决定的是主轴的方向，即是项目的排列方向

.box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    
    .flex-container {
      -webkit-flex-direction: row; /_ Safari _/
      flex-direction:         row;
    }
    
    .flex-container {
      -webkit-flex-direction: row-reverse; /_ Safari _/
      flex-direction:         row-reverse;
    }
    
    .flex-container {
      -webkit-flex-direction: column; /_ Safari _/
      flex-direction:         column;
    }
    
    .flex-container {
      -webkit-flex-direction: column-reverse; /_ Safari _/
      flex-direction:         column-reverse;
    }

其使用`flex-direction`的`box`格式如下：

// 水平
    .box {
    	flex-direction: row; 
    }
    
    // 水平倒置
    .box {
    	flex-direction: row-reverse; 
    }
    
    // 垂直
    .box {
    	flex-direction: column ; 
    }
    
    // 垂直倒置
    .box {
    	flex-direction: column-reverse; 
    }

![ae96ca960f18ec2a6bd97d93c4be739d.png][]

.box {
    	width: 400upx;
    	height: 300upx;
    	background-color: #007AFF;
    	margin: 10upx;
    }
    
    .item {
    	width: 80upx;
    	height: 80upx;
    	background-color: #1CBBB4;
    	border: 1upx solid #FFFFFF;
    }

`row`：`flex`容器的主轴与当前写入模式的内联轴具有相同的方向。主开始方向和主结束方向分别相当于当前写入模式的开始方向和结束方向。

![cce41c0d0f5dd26bf0532566b5c8ab75.png][]

.box-row {
    	display: flex;
    	flex-direction: row;
    }

`row-reverse`: 与`'row'`相同，只是主开始方向和主结束方向交换了。

![7c5044b2960359ac548109b08fe9fc4a.png][]

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

`column`: `flex`容器的主轴与当前写入模式的块轴方向相同。主开始方向和主结束方向分别相当于当前书写模式的前/头和后/脚方向。

![c893f1e1b8102bc569eda0c1918db23f.png][]

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

`column-reverse`: 与`'column'`相同，只是主开始方向和主结束方向交换了。

![cbfa41713d21838197a68668596ccd12.png][]

.box-column-reverse {
    	display: flex;
    	flex-direction: column-reverse;
    }

> `flex-wrap`属性：根据伸缩容器中的可用空间，指定伸缩项是否换行以及它们换行到多行或多列的方向。

.box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    
    .flex-container {
      -webkit-flex-wrap: nowrap; /_ Safari _/
      flex-wrap:         nowrap;
    }
    
    .flex-container {
      -webkit-flex-wrap: wrap; /_ Safari _/
      flex-wrap:         wrap;
    }
    
    .flex-container {
      -webkit-flex-wrap: wrap-reverse; /_ Safari _/
      flex-wrap:         wrap-reverse;
    }

![2311d6bf4c0b59200c09bbce82988072.png][]

`flex-wrap: nowrap`: 不换行。（所有弹性项目都将在一行上）

![ac0eb2c6dcf31d4d70dc78e08eb15c9f.png][]

.box-flex-wrap-nowrap {
    	display: flex;
    	flex-wrap: nowrap;
    }

`flex-wrap: wrap`: 换行，第一行在上方。（弹性项目将从上到下缠绕在多行上）

![6c20652e9a7c5472059533674f27f476.png][]

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

`wrap-reverse`: 换行，第一行在下方。（弹性项目将从下到上缠绕在多行上）

![aab8493d75cc805916b8ddf18bc41c23.png][]

.box-flex-wrap-wrap-reverse {
    	display: flex;
    	flex-wrap: wrap-reverse;
    }

> `flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。

.box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }
    
    .container {
      flex-flow: column wrap;
    }

![17c6bcf292c5eaf6f5d38eb24b26ea92.png][]

.box-flex-flow-1 {
    	display: flex;
    	flex-flow: auto; // flex-flow: row nowrap;
    }

![5a7b3e41aa815e9d7e609a0eefceb7c8.png][]

.box-flex-flow-2 {
    	display: flex;
    	flex-flow: row wrap;
    }

> `justify-content`属性:指定在解析了任意灵活长度和自动边距后，伸缩项如何沿伸缩容器的主轴对齐。(定义了项目在主轴上的对齐方式)

.box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

> `flex-start`

初始值。伸缩项目被打包在行首。第一个伸缩项的起始边被放置在伸缩容器的开始处。下一个伸缩项的起始边与第一个伸缩项的结束边按布局轴方向依次放置。所有沿布局轴保留的空间都放置在布局轴的末端。

.box-flex-justify-content-1 {
    	display: flex;
    	justify-content: flex-start;
    }

如图效果：

![f38a9ceab17566137124076d607cff1a.png][]

> `flex-end`

弹性物品被打包到行尾。第一个伸缩项的结束边缘被放置在伸缩容器的末端。下一个伸缩项目的结束边缘与第一个伸缩项目的开始边缘按布局轴方向依次放置。沿布局轴剩下的所有空间都放置在布局轴的起点。

.box-flex-justify-content-2 {
    	display: flex;
    	justify-content: flex-end;
    }

如图效果：

![be2ed4bcbe6735e8dbec84d735df4991.png][]

> `center`

弹性物品被打包在线的中间。`flex`项目在直线上放置冲洗彼此对齐线的中心,与等量的`main-start`边缘之间的空白行和第一项之间的线,主要目的的边缘线,最后一项。(如果剩余的空闲空间是负的，伸缩项将在两个方向上相等地溢出。)

.box-flex-justify-content-3 {
    	display: flex;
    	justify-content: center;
    }

如图效果：

![33c8aa5495b70b4e05c6c060011cceda.png][]

> `space-between`

弹性项目均匀地分布在这条线上。如果剩余的自由空间是负的，或者一行上只有一个`flex`项目，这个值与`' flex-start '`相同。否则,`main-start`保证的第一`flex`项目线的边缘放置充裕的`main-start`边缘线,最后一个`flex`项的主要目的利润边缘线放置充裕的主要目的边缘线,和其余的`flex`项目的分布之间的间距与任何两个相邻物品是一样的。

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

如图效果：

![e59b0ac203b9e1757fa5fbb7e43a0b8c.png][]

> `space-around`

弹性项目均匀地分布在线中，在两端有一半大小的空间。如果剩余的自由空间是负的，或者一行上只有一个伸缩项，这个值与`' center '`相同。否则，行上的伸缩项的分布使行上任意两个相邻伸缩项之间的间距相同，并且第一个/最后一个伸缩项与伸缩容器边缘之间的间距为伸缩项之间间距的一半。

.box-flex-justify-content-5 {
    	display: flex;
    	justify-content: space-around;
    }

如图效果：

![cb0fe060601dfe2b23b1789da227ab04.png][]

`space-evenly`：分配项目，以使任意两个项目之间的间距（以及到边缘的间距）相等。

![7aabf170436a0716e4e0978775d60a5e.png][]

> `align-items`属性：指定伸缩容器中伸缩项的对齐值(垂直于由伸缩方向属性定义的布局轴)。

.box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

修改`item`样式如图:

![07bce9d62fb13ecab0e7aba67f030e2a.png][]

.item1 {
    	width: 100upx;
    	height: 120upx;
    }
    
    .item2 {
    	width: 100upx;
    	height: 130upx;
    }
    
    .item3 {
    	width: 100upx;
    	height: 140upx;
    }

> `flex-start`：交叉轴的起点对齐。

![755c4ec2b1b850046c52b68f2500330e.png][]

.box-flex-align-items-1 {
    	display: flex;
    	align-items: flex-start;
    }

> `flex-end`：交叉轴的终点对齐。

![ebb1217ca2e27a3b3f691b243a60dc3e.png][]

.box-flex-align-items-2 {
    	display: flex;
    	align-items: flex-end;
    }

> `center`：交叉轴的中点对齐。

![8d9b795919e1d79df19c3d8f4a6c5411.png][]

.box-flex-align-items-3 {
    	display: flex;
    	align-items: center;
    }

> `baseline`: 项目的第一行文字的基线对齐。

修改`item`，以第一行文字的基线对齐，想如图效果，`itme3-text`顶部没有剩余空间，就被强迫这样了。如果有空间，已第一个为标准对齐，第一个`item`文本底线对齐。

.item1-text {
    	padding: 5upx;
    	width: 120upx;
    	height: 120upx;
    }
    
    .item2-text {
    	width: 120upx;
    	height: 130upx;
    }
    
    .item3-text {
    	padding: 15upx;
    	width: 120upx;
    	height: 140upx;
    }

![957ebad5af50e27f9baa0c59bc5e9a45.png][]

.box-flex-align-items-4 {
    	display: flex;
    	align-items: baseline;
    }

> `stretch`（默认值）：如果项目未设置高度或设为`auto`，将占满整个容器的高度。

修改`item`，没有定义高度，如果有高度还是按照原来的高度呈现。

.item-noheight {
    	width: 100upx;
    	border: 1upx solid #FFFFFF;
    }

![0011ae639787cb410ccd13ff479b000e.png][]

.box-flex-align-items-5 {
    	display: flex;
    	align-items: stretch;
    }

> `align-content`属性：指定当与`flex-direction`属性定义的轴垂直的轴上有额外空间时，`flex`项目的行如何在`flex`容器内对齐。

`align-content`属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

`flex-start`：交叉轴的起点对齐

![c5d1e93e00bee402810f315471ce1a27.png][]

`flex-end`：与交叉轴的终点对齐

![aec298d9647376aa0ef0e46dcb496463.png][]

`center`：与交叉轴的中点对齐

![ef590a5ef4ee60e1b432474df534cdb5.png][]

`space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布

![73ea1122b8a809b3385cd2093223a2bb.png][]

`space-around`：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍

![0d5758a45e3b7ed2a01c2a5f14b33af7.png][]

`stretch`：轴线占满整个交叉轴

![fb6c540c6b287e54456026bd8209a48a.png][]

### 项目的属性 ###

1.  `order`
2.  `flex-grow`
3.  `flex-shrink`
4.  `flex-basis`
5.  `flex`
6.  `align-self`

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

.item {
      order: <integer>;
    }

![442b6d1bfebb798db5f9ff7a3bf1f0ed.png][]

![5fe7b8c6294bf1a0668544f462d725a9.png][]

`flex-grow`属性定义项目的放大比例，默认为0，如果还有存在剩余空间，也不会放大

如果所有项目的`flex-grow`属性都为1，那么它们将等分剩余的空间，如果一个项目的`flex-grow`属性为2，其他项目都为1，那么前者占据的剩余空间将比其他项目多一倍。

.item {
      flex-grow: <number>; /* default 0 */
    }

![f44705dec70998993dc94fa4680a2dd6.png][]

`flex-shrink`属性定义了项目的缩小的比例，默认为1，如果空间不足，该项目将缩小

如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小，如果一个项目的`flex-shrink`属性都为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效。

.item {
      flex-shrink: <number>; /* default 1 */
    }

![4cb526f42bb655afc2b41813a9c4c66a.png][]

`flex-basis`属性：定义了在分配多余空间之前，项目占据的主轴空间`main size`，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即是项目的本来的大小。

.item {
      flex-basis: <length> | auto; /* default auto */
    }

![0c3fae9d1f4b845ab36e61f68c433718.png][]

`flex`属性是`flex-grow`，`flex-shrink`和`flex-basis`的简写，默认值为`0 1 auto`，后两个属性可选。

.item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

该属性有两个快捷值：`auto`（`1 1 auto`）和`none`（`0 0 auto`）

`align-self`属性：允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性，默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。

.item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

![1e104750a3d89869a46d6c9527af6c57.png][]

## 点赞、收藏和评论 ##

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

## 我们下期见！ ##

> 文章持续更新，可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/\#/ 已经收录，欢迎Star。

[f129a41aa784ac4e6f10e15c27aa52ba.png]: /images/20210724/8dfb0f05055e42daaa300ebf1beaaed2.png
[a0d322202b7f515c4ba493e89e38ab0d.png]: /images/20210724/55f92a6fbbfe4f8da015b79fe5580520.png
[c70fb1345d5d0f63d1fddbb5e6671dec.png]: /images/20210724/44b01002f72c4ef48c1c7fd7ea6d024d.png
[63083b01454054c7647a5fbcdfe80637.png]: /images/20210724/fba5a438954f400587b27e3721605495.png
[0eb5640f62f333a442f93114801c8083.png]: /images/20210724/161f7b5eb2204c62abea2cbda0c5f1cf.png
[99fc04aab8982b5b81308753fed745e7.png]: /images/20210724/ec359f6ea33d48fcbc8b449cf2009d45.png
[ae96ca960f18ec2a6bd97d93c4be739d.png]: /images/20210724/b3ef3066ed394e32acffd55cf7824b6d.png
[cce41c0d0f5dd26bf0532566b5c8ab75.png]: /images/20210724/2fb40fc3d85e4274bb4db171d46a6160.png
[7c5044b2960359ac548109b08fe9fc4a.png]: /images/20210724/99fe00b402f34c6a90961eca69ab9179.png
[c893f1e1b8102bc569eda0c1918db23f.png]: /images/20210724/f11de01b0f9443eb9e7d59869f020c52.png
[cbfa41713d21838197a68668596ccd12.png]: /images/20210724/ed1e109ab8dc4723a4653618e17eb284.png
[2311d6bf4c0b59200c09bbce82988072.png]: /images/20210724/8f8442458359428b8532f7472e246ed7.png
[ac0eb2c6dcf31d4d70dc78e08eb15c9f.png]: /images/20210724/e97e290eb14e4defbae5d0905b96b407.png
[6c20652e9a7c5472059533674f27f476.png]: /images/20210724/95751725b8d64a199f140b7e82ca78fd.png
[aab8493d75cc805916b8ddf18bc41c23.png]: /images/20210724/54575a15fcc0422cb4567054e6c539e8.png
[17c6bcf292c5eaf6f5d38eb24b26ea92.png]: /images/20210724/9313949d156949ccafad7cffe8eb7dbb.png
[5a7b3e41aa815e9d7e609a0eefceb7c8.png]: /images/20210724/3895616de79c403dabaa03380cba5a15.png
[f38a9ceab17566137124076d607cff1a.png]: /images/20210724/f0e54c70211746c2912adef4b1495b04.png
[be2ed4bcbe6735e8dbec84d735df4991.png]: /images/20210724/6595e810e9b54dffb7dde61c7692ee03.png
[33c8aa5495b70b4e05c6c060011cceda.png]: /images/20210724/45e26fee5ee44e8d9f3974a0fccd56f2.png
[e59b0ac203b9e1757fa5fbb7e43a0b8c.png]: /images/20210724/104d1f1e49aa4595948d6d55cbfeb7ea.png
[cb0fe060601dfe2b23b1789da227ab04.png]: /images/20210724/1c660e44b7a44f258cdca8e13a9337c7.png
[7aabf170436a0716e4e0978775d60a5e.png]: /images/20210724/8f631fe515fb4fad8eef594a6efba779.png
[07bce9d62fb13ecab0e7aba67f030e2a.png]: /images/20210724/d9737bdf179a4735a8bd3cb1fd3e60bb.png
[755c4ec2b1b850046c52b68f2500330e.png]: /images/20210724/7b8315af065142ee840dd78f63e26023.png
[ebb1217ca2e27a3b3f691b243a60dc3e.png]: /images/20210724/05cfee9a57a2429f9f93f46e148ba837.png
[8d9b795919e1d79df19c3d8f4a6c5411.png]: /images/20210724/ea167fb701dc4682a76f9bde984ab275.png
[957ebad5af50e27f9baa0c59bc5e9a45.png]: /images/20210724/b8e57e633ab34f29ba350dd95c26d737.png
[0011ae639787cb410ccd13ff479b000e.png]: /images/20210724/532c32cded654864844b1f9f57285ce0.png
[c5d1e93e00bee402810f315471ce1a27.png]: /images/20210724/5df0b90a71ca4acf828d200a46fbfd66.png
[aec298d9647376aa0ef0e46dcb496463.png]: /images/20210724/6238f28b238f4c07baf79cc72112bc9d.png
[ef590a5ef4ee60e1b432474df534cdb5.png]: /images/20210724/ec75ce91c8ea42a5997ab3376e7aa58d.png
[73ea1122b8a809b3385cd2093223a2bb.png]: /images/20210724/956909d1fdfb4a0caa7f1739b91aa98d.png
[0d5758a45e3b7ed2a01c2a5f14b33af7.png]: /images/20210724/a567633ac6bc473f9107129721284b63.png
[fb6c540c6b287e54456026bd8209a48a.png]: /images/20210724/ea1dce8987484fe7945028b02ae614df.png
[442b6d1bfebb798db5f9ff7a3bf1f0ed.png]: /images/20210724/8b7456ff913f41ae906ac463348498e3.png
[5fe7b8c6294bf1a0668544f462d725a9.png]: /images/20210724/b6e0363d3e274b40af54eac931d21126.png
[f44705dec70998993dc94fa4680a2dd6.png]: /images/20210724/07938ea64f544ad0ab9f799c72738009.png
[4cb526f42bb655afc2b41813a9c4c66a.png]: /images/20210724/3229eab626884f7b89cdb33e9694b55a.png
[0c3fae9d1f4b845ab36e61f68c433718.png]: /images/20210724/0ee3284393a64f7eb694132ecdcdf106.png
[1e104750a3d89869a46d6c9527af6c57.png]: /images/20210724/5b05c0c0caa84be788090d40e0c54a57.png