css弹性盒子详解

学习就是在不断的遗忘中不断的回味📦
弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子 = 弹性容器 + 弹性子元素
弹性容器如何定义：通过设置display的值为flex或者inline-flex

特色：弹性容器外和弹性子元素的渲染是正常渲染，弹性盒子只定义了弹性子元素如何布局。

注意：弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

那么我们先从简单的入手，先看弹性盒子内部的弹性子元素排列方式flex-direction

语法：flex-direction: row(默认) | row-reverse | column | column-reverse

图解：

案例效果：

justify-content 属性 - 内容对齐方式(相对于y轴)
图解：

案例效果：

align-items属性，和justify-content效果类似，不过它是对于x轴来说对齐的

语法：align-items: flex-start | flex-end | center | baseline | stretch
案例效果图：

flex-wrap 属性用于指定弹性盒子的子元素换行方式
语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

案例效果图：

align-content 属性类似于 align-items, 但它是设置各个行的对齐。
语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch

案例效果图：

那可能有些同学就想问了，为什么align-content和align-items的效果差不多呢，明明介绍的功能不是一样的呀，那是因为弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行，所以他们的效果看起来好像一模一样而已。

以上都是对于弹性容器设置值的，那么弹性子元素有哪些属性呢？我们一起去看看吧🚁
排序语法：order：数字（数字越大越后面，可以为数字）、对齐：align-self、分配空间：flex

排序案例效果图：

align-self属性用于设置弹性元素自身在侧轴（y轴）上的对齐方式。简单来说就是相对于x轴定位，和align-items类似
语法：align-self: auto | flex-start | flex-end | center | baseline | stretch
案例效果图：

注意：auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’

flex 属性用于指定弹性子元素如何分配空间。
语法：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

这里我们只对 [ flex：数字 ] 的一个情况进行分析
案例效果：

好啦，今天的学习到这就结束了，🚇下次见咯~