flex布局全解析

1 认识flex布局

flex布局是目前web开发中使用最多的布局方案

flex布局（flexible布局），弹性布局

目前在移动端应用最多，目前PC端也开始使用

1.1 两个重要概念

开启了flex布局的元素叫flex container
flex container里面的直接子元素叫做flex items

1.2 开启flex布局

设置display属性为flex或者inline-flex
flex: 设置元素为块级元素
inline-flex: 设置元素为行内元素

2 flex布局模型

主要概念：

• 主轴 main axis
• 交叉轴 cross axis
• 主轴开始位置 main start
• 主轴结束位置 main end
• 交叉轴开始位置 cross start
• 交叉轴结束位置 cross end
• 主轴大小 main size
• 交叉轴大小 cross size

flex相关属性：

• 应用在flex container

  • flex-flow
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

• 应用在flex item

  • flex
  • flex-grow
  • flex-basic
  • flex-shrink
  • order
  • align-self

3 flex container 属性介绍

3.1 flex-direction

flex-direcotion决定主轴的方向，默认主轴的方向是x轴从左到右

可选参数：

• row 默认值

• row-reverse x轴从右到左

• column 主轴为y方向，从上到下

• column-reverse 主轴为y方向，从下到上

3.2 justify-content

justify-content决定flex items沿主轴的对齐方式

可选参数：

• flex-start 从main start开始往后排列各个flex item

• flex-end 从main end开始往后排列各个flex item

• center 居中排列各个flex item

• space-between 左右两个靠边，中间间隔相等

• space-evenly 所有间隔均相同

• space-around 左右两个旁边的间距是中间间距的1/2

3.3 align-item

align-item决定flex items在交叉轴的对齐方式
可选参数：

• auto 默认值

• stretch 与auto相同

• center

• flex-start

• flex-end

3.4 flex-wrap

决定多行显示
可选参数

• nowrap 默认值，将所有flex items都放在同一行显示，如果宽度不够，则压缩flex items

• wrap 分行显示

• wrap-reverse 沿着cross axis方向调换两部分内容

3.5 flex-flow

是flex-direction和flex-wrap的缩写属性

相当于：
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content：space-evenly;(保证flex items平均分布)

3.6 align-content

align content 决定多行flex items在cross axis上的对齐方式，用发与justify-content类似

可选参数：

• strech(默认值)

• fixed-start:与cross start对齐

• fixed-end:与cross end对齐

• center：以cross axis的中部对齐

• space-between：flex items之间的距离相等;与cross start、cross end两端对齐

• space-around: flex items之间的距离相等;flex items与cross start、cross end之间的距离是flex items之间距离的一半

• space-evenly:flex items之间的距离相等;flex items与cross start、 cross end之间的距离等于flex items之间的距离

4 flex items 属性介绍

4.1 order

决定了flex items 的排布顺序，可以设置任意整数，越小越排在前面，默认值是0

.item1 {
    background-color: aqua;
    /* order: 1 */
}
.item2 {
    background-color: bisque;
}
.item3 {
    background-color: red;
    /* order: -1 */
}

.item1 {
    background-color: aqua;
    order: 1

}
.item2 {
    background-color: bisque;
}
.item3 {
    background-color: red;
    order: -1
}

4.2 align-self

覆盖flex-container设置的align-items，默认值为auto，align-self与flex-container的align-items

<style>
.box {
    width: 550px;
    height: 500px;
    background-color: orange;
    display: flex;
    align-items: center;

}
.item {
    height: 100px;
    width: 100px;
    text-align: center;
    color: black;
    font-weight: bold;
}
.item1 {
    background-color: aqua;
    align-self: auto

}
.item2 {
    background-color: bisque;
    align-self: flex-start;
}
.item3 {
    background-color: red;
    align-self: flex-end;
}
</style>

4.3 flex-grow

flex-grow决定了flex items如果扩展

可以设置任意非负数字（正整数，正小数，0）.默认值是0

当flex container在main axis方向上有剩余size时，flex-grow属性才会有效

flex-grow扩展到最大不能超过max-height和max-width

• flex items的flex grow加和大于1

flex items扩展的size = flex container剩余size（250px）* flex-grow(1) / sum(1+1+1)

<style>
.box {
    width: 550px;
    height: 500px;
    background-color: orange;
    display: flex;

}
.item {
    height: 100px;
    width: 100px;
    text-align: center;
    color: black;
    font-weight: bold;
}
.item1 {
    background-color: aqua;
    flex-grow: 1;
}
.item2 {
    background-color: bisque;
    flex-grow: 1;

}
.item3 {
    background-color: red;
    flex-grow: 1;
}
</style>

• flex items的flex grow加和小于1

flex items扩展的size = flex container剩余size * flex-grow

<style>
.box {
    width: 550px;
    height: 500px;
    background-color: orange;
    display: flex;

}
.item {
    height: 100px;
    width: 100px;
    text-align: center;
    color: black;
    font-weight: bold;
}
.item1 {
    background-color: aqua;
    flex-grow: 0.2;
}
.item2 {
    background-color: bisque;
    flex-grow: 0.3;

}
.item3 {
    background-color: red;
    flex-grow: 0.1;
}
</style>

4.4 flex-shrink

flex-shrink决定了flex items如何收缩，可以设置正数，和0，默认值为1

当flex items在main axis 方向上超过了flex container的size，flex-shrink属性才会有效

flex-shrink收缩后最终size不能小于min-width/min-height

• 如果所有flex items的flex-shrink总和超过1

<style>
.box {
    width: 500px;
    height: 500px;
    background-color: orange;
    display: flex;

}
.item {
    height: 100px;
    width: 200px;
    text-align: center;
    color: black;
    font-weight: bold;
}
.item1 {
    background-color: aqua;

}
.item2 {
    background-color: bisque;


}
.item3 {
    background-color: red;
    flex-grow: 0.1;
}
</style>

从渲染效果可看出，flex-shrink默认为1

• 如果所有flex items的flex-shrink总和不超过1

<style>
.box {
    width: 500px;
    height: 500px;
    background-color: orange;
    display: flex;

}
.item {
    height: 100px;
    width: 200px;
    text-align: center;
    color: black;
    font-weight: bold;
}
.item1 {
    background-color: aqua;
    flex-shrink: 0.1;

}
.item2 {
    background-color: bisque;
    flex-shrink: 0.2;


}
.item3 {
    background-color: red;
    flex-shrink: 0.2;
}
</style>

4.5 flex-basis

flex-basic用来设置flex items在main axis方向上的base size 默认值为auto，具体宽度数据为100px

决定flex items最终base size的因素，从优先级高到低

1.max-width\max-height\min-width\min-height

2.flex-basis

3.width\height

4.内容本身的size

4.6 flex