flex布局

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

display: flex; 一定要给父元素加

 在flex眼中，标签不再分类。简单说就是没有块级元素，行内元素和行内块元素

任何一个元素都可以直接给宽度和高度一行显示

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

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

主轴对齐方式

属性名：justify-content

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

重点：space-between

侧轴对齐方式

属性名：align-items

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

举例：让子盒子水平垂直居中

 

.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； 一定给子盒子加

圣杯布局

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

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

核心思路：

1、两侧盒子写固定大小

2、中间盒子 flex: 1; 占满剩余空间

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