felx布局

最新推荐文章于 2023-10-13 17:16:41 发布

啊啾-啾

最新推荐文章于 2023-10-13 17:16:41 发布

阅读量647

点赞数 1

分类专栏： flex布局文章标签： css 前端

本文链接：https://blog.csdn.net/m0_72852527/article/details/125963154

版权

flex布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

特点:

1.更简单,灵活,避免了浮动脱标的问题.

2.需要给父元素添加disply:flex(父盒子变为弹性容器,子盒子变为弹性盒子)

1.主轴对齐方式(给父元素添加)

justify-content:

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

1.显示效果:右对齐

 justify-content: flex-end;

2.1显示效果:左对齐(默认效果)

justify-content: flex-start;

3.显示效果：两侧没缝隙

justify-content: space-between;

4. 效果如下： 记住2倍 (中间是两端间距的两倍)

justify-content: space-around;

5. 效果如下： 记住间距一样大

justify-content: space-evenly;

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

 justify-content: center;

2.侧轴对齐方式((给父元素添加))

align-items

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

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

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

3.伸缩比(给子盒子加)

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

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

不给高的前提下,子盒子默认和父盒子一样高

宽度不需要设

css:

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

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

html:

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

效果图:

可以利用伸缩比进行圣杯布局

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

思路：

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

<div class="box">
    <div>固定大小</div>
    <div>宽度自适应</div>
    <div>固定大小</div>
  </div>

 .box{
      width: 100%;
      height: 80px;
      background-color: darkgreen;
      display: flex;
    }
    .box>div:first-child{
      width: 80px;
      height: 80px;
      background-color: aquamarine;
    }
    .box>div:nth-child(2n){
     flex: 1;
      background-color: rgb(97, 246, 159);
    }
    .box>div:nth-child(3n){
      width: 80px;
      height: 80px;
      background-color: rgb(92, 239, 52);
    }

效果图