弹性布局知识学习总结

弹性布局

一 、给父级元素添加display:flex/inline-flex属性

display:
flex 经常用于让块级元素变为弹性容器
inline-flex; 经常用于让行内元素变为弹性容器

1.主轴和交叉轴

    在弹性布局中，我们会通过属性规定水平/垂直方向为主轴
    与主轴垂直的另一方向称为交叉轴

2.弹性布局的特点

（1）当元素变为弹性容器之后，这个元素的text-align失效，内部项目不会执行水平对齐
（2）弹性项目，可以设置宽高
（3）项目的浮动，clear：both都失效
总结：之前所有学习过的对齐方式，对于弹性项目都失效
弹性项目的对齐，取决于主轴、交叉轴

3.父级元素的常用属性

flex-direction : 定义主轴的方向
flex-wrap : 项目在主轴上是否换行
flex-flow : flex-direction和flex-wrap的简写方式
justify-content :定义项目在主轴上的排列方式
align-items: 定义项目在垂直交叉轴的排列方式
align-content:定义多根轴线的对齐方式

（1）flex-direction（决定主轴的方向）

• row(默认值):主轴为水平方向，起点在左端
• row-reverse:主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上面
• column-reverse: 主轴为垂直反向，起点在下沿

（2）flex-wrap（定义如果一条轴线放不下，如何换行）

• nowrap(默认)：不换行
• wrap：换行，第一行在上方
• wrap-reverse: 换行，第一行在下方

（3）flex-flow

• flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

（4）justify-content（定义了项目在主轴上的对齐方式）

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

（5）align-items（定义项目在垂直交叉轴上如何对齐）

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

（6）align-content（定义了多根轴线的对齐方式。该属性配合flex-wrap:wrap一起使用）

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch（默认值）：轴线占满整个交叉轴

4.子级元素的常用属性

order：定义项目的排列方式。数值越小，排列越靠前。默认为0
flex-grow：定义项目的放大比例，默认为0，既如果存在剩下空间，也不放大
flex-shrink：定义项目的缩小比例，默认是1，既如果空间不足，该项目将缩小
flex-basis：定义在分配多余空间之间，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
flex：flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto,后两个属性可选
align-self