flex响应式布局总结

2,127 阅读4分钟

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

内容结构

  • 容器属性
    • 主轴布局
      • 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;
}

效果

image.png

容器属性

css

.warpper {
    width: 500px;
    height: 500px;
    display: flex;
}

效果

image.png

主轴布局

主轴侧轴概念

image.png

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 效果

image.png

内容属性

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; // (默认)
}

效果

image.png

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;
}

效果

image.png

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;
}

效果

image.png

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;
}

效果

image.png