flex响应式布局总结

SGAI

2021年07月14日 23:43

众所周知，弹性布局在前端的开发中有着举足轻重的地位，只要使用得当，可以用其制作出许多复杂的布局，但本人最主要的都是使用在响应式布局方面。

内容结构

容器属性
- 主轴布局
  - flex-direction
  - flex-wrap
  - flex-flow
  - justify-content
- 侧轴布局
  - align-items
- 多轴布局
  - align-content
内容属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self

使用flex布局: display:flex;

demo

hmtl

<div class="warpper">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
</div>
复制代码

css

.warpper {
    width: 500px;
    height: 500px;
}
.inner {
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
}
.inner:nth-child(even){
    width: 100px;
    height: 100px;
    background-color: red;
}
.inner:nth-child(odd){
    width: 100px;
    height: 100px;
    background-color: #000000;
}
复制代码

效果

容器属性

css

.warpper {
    width: 500px;
    height: 500px;
    display: flex;
}
复制代码

效果

主轴布局

主轴侧轴概念

`flex-direction`

使用容器样式flex布局下添加： flex-direction: param;

@param: 
       row: 主轴方向向右
       row-reverse: 主轴方向向左
       column: 主轴方向向下
       column-reverse: 主轴方向向上
复制代码

`flex-wrap`

使用容器样式flex布局下添加： flex-wrap: param;

@param: 
       nowrap: 不换行
       wrap: 换行
       wrap-reverse: 反方向换行
复制代码

`flex-flow`

使用容器样式flex布局下添加： flex-flow: <flex-direction> || <flex-wrap>;

`justify-content`

使用容器样式flex布局下添加： justify-content: param;

@param: 
       flex-start: 主轴起点开始
       flex-end: 主轴终点开始
       center: 居中
       space-between: 两端对齐
       space-around: 平均分布在两边
复制代码

侧轴布局

`align-items`

使用容器样式flex布局下添加： align-items: param;

@param: 
       flex-start: 侧轴起点开始
       flex-end: 侧轴终点开始
       center: 居中
       baseline: 盒子文字基线对齐
       stretch: 没有高度情况下！默认拉伸充满父元素高度
复制代码

多轴布局

`align-content`

使用容器样式flex布局下添加： align-content: param;

@param: 
       flex-start: 侧轴起点开始
       flex-end: 侧轴终点开始
       center: 侧轴居中
       space-between: 侧轴两端对齐
       space-around: 在侧轴上平均分布在两边
       stretch: 没有高度情况下！默认拉伸充满父元素空间
复制代码

无高度stretch 效果

内容属性

order

后面跟着一个整数，数值越大，该元素越往后 css

.inner:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: red;
    order: 8;
}
.inner:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: #000000;
    order: -8;
}
.inner:nth-child(3){
    width: 100px;
    height: 100px;
    background-color: red;
    order: 2;
}
.inner:nth-child(4){
    width: 100px;
    height: 100px;
    background-color: red;
    order: 1; // (默认)
}
复制代码

效果

flex-grow

通过该属性后面跟一个整数，根据兄弟属性之间该整数的占比，父元素剩余空间会被平均分配。 css

.inner:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: red;
    flex-grow: 0;
}
.inner:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: #000000;
    flex-grow: 1;
}
.inner:nth-child(3){
    width: 100px;
    height: 100px;
    background-color: red;
    flex-grow: 0;
}
.inner:nth-child(4){
    width: 100px;
    height: 100px;
    background-color: black;
    flex-grow: 0;
}
复制代码

效果

flex-shrink

与flex-grow相反，当父元素空间不够的时候他会进行缩小，而flex-shrink就是控制缩小的的属性

他后面也是跟一个整数，不过他的算法比较麻烦，我们只要知道后面跟的数值越大，则缩小的越多

flex-shrink：0; 表示不收缩

flex-basis

初始所占空间的大小 auto则为自定义宽度 css

.inner:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: red;
    flex-basis: 200px;
}
.inner:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: #000000;
    flex-basis: 50px;
}
.inner:nth-child(3){
    width: 100px;
    height: 100px;
    background-color: red;
    flex-basis: 50px;
}
.inner:nth-child(4){
    width: 100px;
    height: 100px;
    background-color: black;
    flex-basis: 150px;
}
复制代码

效果

flex

flex: <flex-grow> || <flex-shrink> || <flex-basis>

auto: flex: 1 1 auto;

none: flex: 0 0 auto;

align-self

单个内容盒子在侧轴上不同的对齐方式

内容css: align-self: param;

@param:
       auto: 继承align-items
       flex-start: 侧轴起点开始
       flex-end: 侧轴终点开始
       center: 居中
       baseline: 盒子文字基线对齐
       stretch: 没有高度情况下！默认拉伸充满父元素高度
复制代码

css

.inner:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: red;
    align-self: center;
}
.inner:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: #000000;
    align-self: flex-end;
}
.inner:nth-child(3){
    width: 100px;
    height: 100px;
    background-color: red;
    align-self: flex-start;
}
.inner:nth-child(4){
    width: 100px;
    /* height: 100px; */
    background-color: black;
    align-self: stretch;
}
复制代码

效果