Flex布局

Flex 布局又称为弹性布局 (css3新式布局) `display:flex;`

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

弹性布局的作用：灵活、快捷开发网页，更方便的控制子元素的位置

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
弹性布局的使用：
给父元素添加 display:flex; 属性,把父元素变为弹性容器子元素为弹性盒子，子元素可以自动的挤压或拉伸

弹性布局组成部分

弹性容器
弹性盒子
主轴
侧轴 / 交叉轴

主轴(水平方向 x轴)

justify-content: 属性值 ; 设置子元素在主轴上的对齐方式

justify-content: flex-start； 默认值主轴开始的位置对齐
justify-content: flex-end； 主轴结束的位置对齐
justify-content: center； 主轴居中对齐
justify-content: space-between； 两端对齐中间等距
justify-content: space-evenly； 子元素盒子两边距离等距
justify-content: space-around； 中间等距两端距离为中间距离的一半

单行侧轴(y轴)

aling-items: 属性值； 子元素单行侧轴对齐

aling-items: stretch 默认值拉伸当子元素不设置高度或高度为auto 拉伸至父元素的高度
aling-items: flex-start 侧轴开始位置对齐
aling-items: flex-end 侧轴结束位置对齐
aling-items: center 侧轴居中对齐

flex属性添加在子元素上

修改弹性盒子,伸缩比 flex: 1 ;

所有子元素都没有设置宽度一份宽度=父元素宽度/总分数
子元素部分设置宽度部分设置份数 1份宽度=(父元素宽度-固定宽度)/总份数

<head>
    <style>
        .box {
            display: flex;
            width: 1000px;
            height: 500px;
            background: #ccc;
        }
        .box div {
            height: 220px;
            background-color: pink;
        }
        .box div:nth-child(1) {
            /* 设置宽度 */
            width: 200px;
        }
        .box div:nth-child(2) {
            /* 设置份数 */
            flex: 2;
        }
        .box div:nth-child(3) {
            /* 设置份数 */
            flex: 4;
        }
        .box div:nth-child(4) {
            /* 设置宽度 */
            width: 200px;
        }
        .box div:nth-child(2n) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

变轴

flex-direction: 属性值 ; 改变元素排列方向,更改主轴方向

flex-direction: row 默认值水平方向自左而右
flex-direction: row-reverse 水平反方向自右而左
flex-direction: colum 垂直方向主轴变为垂直方向自上而下
flex-direction: colum-reverse 垂直反方向自下而上

换行显示

flex-wrap: 属性值 ; 实现弹性盒子多行换行

flex-wrap: nowrap 默认值不换行
flex-wrap: wrap 换行

多行侧轴对齐(一定要先换行)

align-content: 属性值 ;

align-content: stretch ; 默认值,拉伸。弹性盒子不设置高度会拉伸，设置高度的弹性盒子不会拉伸每行间距相等。
align-content: flex-start 侧轴开始位置对齐
align-content: flex-end 侧轴结束位置对齐
align-content: center 侧轴居中对齐
align-content: space-between 两端对齐中间等距
align-content: space-around 两端距离是中间等距的一半
align-content: space-evenly 弹性盒子两边距离相等

业务常用属性总结4

outline: none; 清除 input button 的输入框高亮提示
-webkit-font-smoothing: antialiased ; CSS3 抗锯齿形,让文字显示更加清晰
min-width: 属性值；和max-width: 属性值；最小宽度和最大宽度
min-hight: 属性值；和max-hight: 属性值；最小高度和最大高度
盒子水平居中的方法

使用弹性布局：所有子元素包括文字，实现水平居中，给父元素display:flex; 主轴 justify-content:center; 侧轴 align-items:center;
使用定位1：给父元素 position: relative; 给子元素position: absolute; left: 50%; margin-left: -50%; top: 50%; margin-top: -50%;
使用定位2：给父元素 position: relative; 给子元素position: absolute; left: 0; right: 0; bottom: 0; top: 0;
使用定位1：给父元素 position: relative; 给子元素position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

给子元素使用display: inline-block; vertical-align: middle; 给父元素使用 text-align: center; line-height: 父元素的高度;

<head>
    <style>
        .box {
            width: 300px;
            height: 300px;
            /* 给父元素添加居中 */
            text-align: center;
            /* 行高与高度一致 */
            line-height: 300px;
            background-color: #ccc;
        }
        .box div {
            /* 给子元素添加 转换属性转换为行内块元素 */
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #111;
            /* 基线居中对其属性 */
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>