什么是flex布局?flex布局能做什么?

flex布局是将父盒子作为一个弹性容器,可以让子盒子自适应排列.极大的提高了我们布局的效率,更简单,更灵活

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

主轴对齐方式

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

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

justify-content: space-between;显示效果：两侧没缝隙

justify-content: space-around;效果如下： 记住2倍 justify-content: space-evenly;效果如下： 记住空隙一样大 justify-content: center;效果如下： 经常用于让一个盒子水平居中

侧轴对齐方式

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

重点记住center ，可以让元素垂直居中。 align-items: center;

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

display: flex;
justify-content: center;
align-items: center;

伸缩比

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

flex:1; 一定给子盒子加

语法：

flex: 1;

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

圣杯布局

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

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，

核心思路：

• 两侧盒子写固定大小
• 中间盒子 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;
}