flex弹性布局

flex弹性布局详解

开启flex布局只需在最外层容器设置display:flex; 即可。

整个网页就可以看成一个flex容器

采用flex布局称之为flex容器，所有子容器自动生成容器成员称之为flex项目

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴(cross axis). 主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

当我们给父容器加上display:flex; 容器内的子元素就会横着排列

父元素容器属性：

justify-content - 父元素属性

值：justify-content: center 子元素就会沿着横轴方向整体居中对齐

       justify-content: flex-end 整体靠右对齐

       justify-content: space-between 左右对齐，且项目之间的间距相等

       justify-content: space-around 项目之间的间距为左右两侧项目到容器间距的2倍

       justify-content: space-evenly 项目之间间距与项目到容器间距相等

我们也可以让它沿着交叉轴方向布局分部只需给它添加align-items属性

align-items - 父元素属性

值：align-items: flex-star 默认值

       align-items: center 交叉轴(竖着方向)居中排列

       align-items: flex-end 靠着交叉轴底部对齐

注：我们同时设置align-items:center; justify-content:center; 就可以让元素水平垂直居中(比较重要，这个会在以后的项目中经常遇到)

flex-direction - 父元素属性

值：flex-direction: row - 默认值 顺序排列

       flex-direction: row-reverse 反转项目排序

       flex-direction: column 按列分部 顺序排列

       flex-direction: column-reverse 按列分部 反转项目排序

flex-wrap - 父元素属性

值：flex-wrap: nowrap - 默认值 ，如果子元素的总宽度大于父元素的宽度，那么flex-wrap:nowrap; 就会强行等分宽度容器且不换行

       flex-wrap: wrap 设置了wrap值后，子元素超出父元素的宽度后，就会自然换行

子元素项目属性：

order - 子元素属性

order属性用于决定项目排列顺序，数值越小越靠前

align-self - 子元素属性

align-self 如果你要某个子元素项目单独排列，只需给该元素设置align-self。

align-self:center; 垂直方向居中。

align-self:flex-end; 靠底部对齐。

flex - 子元素属性

值：默认0 1 auto，flex属性是flex-grow，flex-shrink，flex-basis三个属性的简写，用于定义子元素项目放大、缩小、宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，none(0 0 auto)不放大但等分缩小

flex-grow - 子元素属性（注意区分父元素的flex-wrap属性，不要记混淆）

值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认值0是不放大；假设默认三个子元素项目中前两个项目都是0，最后一个是1，最后的项目会占满所有空间。

注意：即便是子元素设置了固定宽度，也会放大。

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目flex-grow均为1，那么后两个项目平分剩余空间

flex-shrink - 子元素属性

值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

flex-basis - 子元素属性

值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性。

比如：我同时设置了flex-basis:80px; 和width:60px;它将会以flex-basis属性为准。

建议自己对着敲一遍，以便理解。

文章如有出错请及时联系我，以便更改。