Flex布局

前端菜市场
179 阅读5分钟
  • Flex布局/弹性布局：
    • 是一种浏览器提倡的布局模型
    • 布局网页更简单、灵活
    • 避免浮动脱标的问题

Flex布局模型构成

  • 作用
    • 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
    • Flex布局非常适合结构化布局
  • 设置方式
    • 父元素添加 display: flex
    • 子元素可以自动的挤压或拉伸
  • 组成部分
    • 弹性容器
    • 弹性盒子
    • 主轴
    • 侧轴 / 交叉轴

image-20220401212534944

flex布局极大的提高了我们布局的效率，更简单、灵活。

示例：

<style>
    .box {
        width: 600px;
        height: 140px;
        margin: 100px auto;
    }

    .box span {
        width: 150px;
        height: 140px;
        background-color: pink;
    }
    
    /* 以上为盒子样式 不作为重点 重点看以下代码 */
    
    .box{
        /* 想让span成为弹性布局 那就给他的爸爸加display:flex */
        display: flex;
        /* 弹性盒子沿主轴均匀排列 让span在box中平均分布 */
        justify-content: space-between;
    }
</style>

<div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

63800561629

display: flex; 一定要给亲爸爸加。

主轴对齐方式

属性值作用
flex-start默认值, 起点开始依次排列
flex-end终点开始依次排列
center沿主轴居中排列
space-around弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

重点记住标红的。如果非要问我那个常用，我只能说是 space-between

space-between

justify-content: space-between;

显示效果：两侧没缝隙

image-20220401220005053

space-around

justify-content: space-around;

效果如下： 空隙时边缘的2倍

image-20220401220037204

space-evenly

justify-content: space-evenly;

效果如下： 空隙一样大

image-20220401220155781

center

 justify-content: center;

效果如下： 经常用于让一个盒子水平居中

image-20220401220224906

记忆：

  1. 两侧没缝隙是 between
  2. 缝隙一样大是 evenly
  3. 2倍缝隙是 around

小技巧：

64069442849

见到这个效果，最简单的做法就是： 给大盒一个 左右的padding， 然后在加 justify-content: space-between

侧轴对齐方式

属性值作用
flex-start起点开始依次排列
flex-end终点开始依次排列
center 沿侧轴居中排列
stretch默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

重点记住center ，可以让元素垂直居中。

align-items: center;

我们可以通过flex让一个子盒子水平和垂直居中。

63800636092

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加

分配父级剩余的空间

语法：

flex: 1;

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。

<style>
    .father {
        display: flex;
        height: 300px;
        background-color: pink;
    }

    .father div {
        /* 每个孩子各占1份 */
        flex: 1;
        /* 默认子盒子和父亲一样高z */
        background: purple;
    }
</style>

<div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

显示效果：

63800701573

  1. 一定要给子盒子添加。
  2. 子盒子默认高度会和父盒子一样高。（前提是不给高度）

圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

63800721880

核心思路：

  • 两侧盒子写固定大小
  • 中间盒子 flex: 1; 占满剩余空间
.top {
    display: flex;
    justify-content: c;
}

.top div:first-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:last-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:nth-child(2) {
    flex: 1;
    height: 50px;
    background-color: pink;
}

注意：中间flex: 1; 和 width 有冲突。 优先执行 flex：1；

设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向：flex-direction

image.png

flex-direction：column;

弹性盒子换行

特性：给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行

效果图：

image.png

换行后：

<style>
.box {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    display: flex;
    /* 让弹性盒子换行显示 */
    flex-wrap: wrap;
}

.box div {
    width: 150px;
    height: 100px;
    background-color: pink;
}

.box div:nth-child(odd) {
    background-color: purple;
}
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

效果图： image.png

关键代码：

给父盒子添加

flex-wrap: wrap;

多行对齐方式

设置侧轴多行的垂直对齐方式：align-content

image.png

flex-start

align-content: flex-start;

效果：起点开始 image.png

flex-end

align-content: flex-end;

效果：终点开始 image.png

center

align-content: center;

效果：居中对齐 image.png

space-around

align-content: space-around;

效果：空隙时边缘的2倍 image.png

space-between

align-content: space-between;

效果：两边没空隙 image.png

space-around

align-content: space-around;

效果：空隙一样大

image.png

小结

  1. 在flex眼中，标签不再分类。

    • 简单说就是没有块级元素，行内元素和行内块元素
    • 任何一个元素都可以直接给宽度和高度一行显示

  2. Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动

  3. 当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex

    caniuse.com/ 可以查看兼容性

    /* 父盒子属性 */
    /* justify-content 子元素水平排列方式 */
    /* 水平居中 */
    justify-content: center;
    /* 水平默认起始从左 */
    justify-content: flex-start;
    /* 水平居右 */
    justify-content: flex-end;
    /* 水平两端对齐 */
    justify-content: space-between;
    /* 水平拉手分布 */
    justify-content: space-around;

    /* align-items 子元素垂直排序方式 */
    /* 居中 */
    align-items: center;
    /* 开始 */
    align-items: flex-start;
    /* 底部 */
    align-items: flex-end;
    /* 默认排序方式 */
    flex-direction: row;
    /* 垂直方式排列 */
    flex-direction: column;
    
    /* 子元素是否换行 nowrap默认*/
    flex-wrap: wrap;
    
    /* 只适合单行居中，多行无效*/
    align-items: center;
    /* 子元素多行对其 默认*/
    align-content: stretch;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-around;
    align-content: space-between;
    align-content: space-evenly;


    /* 子盒子分配父级剩余的空间 flex
    flex: 1;

    /* 默认排序方式 */
    flex-direction: row;
    /* 垂直方式排列 */
    flex-direction: column;
avatar
文章
阅读
粉丝