Flex布局详解及活用

第一章、Flex布局详解

1.1 入门

1.1.1 flex是什么

1.1.2 为什么使用flex

1.1.3 设置方式

1.1.4 组成部分

1.2 常用属性

1.2.1 弹性容器（父）常用属性

1.2.2 弹性盒子（子）常用属性

第二章、Flex活用--几种常用的布局

2.1 两列/两栏布局

2.2 水平垂直居中

2.3 三栏布局

2.4 圣杯布局

2.5 流式布局

第一章、Flex布局详解

1.1 入门

1.1.1 flex是什么

弹性盒子布局
是一种由浏览器提倡的布局模型
布局网页更加简单灵活
能避免浮动脱标(脱标：脱离标准文档流)的问题
注意：如果子盒子没有设置高度，子盒子将会拉伸填满父盒子高度

1.1.2 为什么使用flex

解决元素居中问题
自动弹性伸缩，合适适配不同大小的屏幕、移动端和微信小程序、app

1.1.3 设置方式

父元素添加display:flex子元素自动挤压或拉伸。
添加display:flex后的视觉效果：子级一行排列/水平排列
水平排列：默认主轴在水平，弹性盒子默认沿着主轴排列

1.1.4 组成部分

弹性容器(父盒子)
弹性盒子(子盒子)
主轴
侧轴

1.2 常用属性

1.2.1 弹性容器（父）常用属性

1.flex-direction   主轴方向 (常用)
2.flex-wrap        主轴一行满了换行 (常用)
3.justify-content  主轴元素对齐方式 (常用)
4.align-items      侧轴元素对齐方式//单行 (常用)
5.flex-flow        1和2的组合 (了解)
6.align-content    侧轴行对齐方式//多行 (了解)

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .parents{
            display: flex;
            height: 600px;
            background-color: skyblue;
        }
///-----------------使用flex布局区域-----------------------
        .parents{
            flex-direction: row;
            /* flex-direction: row-reverse; 
            flex-direction: column;
            flex-direction: column-reverse; */
            flex-wrap: nowrap;
            /* flex-wrap: wrap;
            flex-wrap: wrap-reverse; */
            justify-content: center;
            /* justify-content: flex-start;
            justify-content: flex-end;
            justify-content: space-between;
            justify-content: space-around;
            justify-content: space-evenly; */
            align-items: center;
            /* align-items: flex-start;
            align-items: flex-end;
            align-items: baseline;
            align-items: stretch; */
        }
///---------------------------------------------------
        .son{
            padding: 80px;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="parents">
        <div class="son red">1</div>
        <div class="son green">2</div>
        <div class="son yellow">3</div>
    </div>
</body>
</html>

flex-direction 主轴方向

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 主轴一行满了是否换行

nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

justify-content 主轴元素对齐方式

这里的方向与 flex-direction 主轴方向 定义的方向是对应的

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly  平均对齐，不靠着容器壁，剩余空间平分

align-items 侧轴元素对齐方式//单行

flex-start：侧轴的起点对齐。
flex-end：侧轴的终点对齐。
center：侧轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex-flow：flex-direction和flex-wrap的组合

写法：flex-low: [flex-direction] [flex-wrap]

align-content 侧轴行对齐方式多行

用法与justify-content 的属性一模一样