flex布局

前言：flex布局极大地提高了我们布局的效率,更简单更，灵活

使用代码：给父元素添加

      display: flex;

父元素内的所有盒子将会在一行排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    .box{
        width: 700px;
        height: 600px;
        margin: 100px auto;
        background-color: pink;
        display: flex;
    }
    .son{
        width: 200px;
        height: 200px;
        background-color: blue;
        border: 1px solid red;
    }
    
 </style>
</head>
<body>
 <div class="box">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
 </div>
</body>
</html>

flex布局默认主轴排序即是X轴;侧轴也就是Y轴

主轴排列方式的方法继续在父元素中添加：

       /* 依次排列-默认值 */
        justify-content: start;

        /* 居中 */
        justify-content: center;
        /* 终点排列 */
        justify-content: end;
        /* 间距1:2 */
        justify-content: space-around;
        /* 俩边间距为0 */
        justify-content: space-between;
        /* 间距都一样 */
        justify-content: space-evenly;

示例:

        justify-content: space-between;

       justify-content: space-evenly;

        justify-content: center;

记忆：

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

侧轴的排列方式：

       /* 上到下依次排列 */
        /* align-items: flex-start;
        侧轴从终点排列
        align-items: flex-end;
        侧轴居中
        align-items: center; */

伸缩比

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

语法：给子盒子加flex:1

flex:1;

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

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

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

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

注意事项：一定要给子盒子添加。子盒子默认高度会和父盒子一样高。

圣杯布局、

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

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

核心思路：

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

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

小结

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

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

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

设置主轴方向

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

修改主轴方向属性: flex-direction 语法：

display：flex;
切换侧轴为主轴
flex-direction：column;

属性值	作用
`row`	行, 水平(默认值)
`column`	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

弹性盒子换行

给父盒子添加flex-warp-wrap子元素即可自动换行语法：

   display：flex;
   flex-wrap：wrap；

设置侧轴对齐方式

注意:

此处设置侧轴多行的垂直对齐方式。 align-content（少）
和前面学过的 align-items （侧轴单行垂直对齐）（多）
align 垂直比如 align-items 垂直对齐 align-content 多行垂直对齐
content 主轴 justify-content align-content 侧轴多行对齐

align-content：center；

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

align-self:控制子元素自己在侧轴上的排列方式

flex布局怎么使用，如何更高效布局静态页面