传统布局与Flex布局

传统布局

兼容性好
布局繁琐
局限性，不能在移动端很好的布局

Flex弹性布局

操作方便，布局极为简单，移动端应用很广泛
PC端浏览器支持情况较差
Ie 11或者更低版本，不支持或者部分支持。

布局原理
任何容器都可以指定flex布局
注意：父元素盒子设置flex布局之后，子元素的float clear和vertical-align属性会失效。

总结flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。（弹性盒子只会影响它的儿子辈，而不是影响它的所有辈，比如它的孙子辈就不会被影响）

CODE

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .parent{
            display: flex;
            width: 80%;
            background-color: pink;
            flex-direction: row-reverse;
        }
        .parent div{
            width: 150px;
            height: 50px;
            margin-left: 20px;
            background-color: #ee9933;
        }

    </style>
</head>
<body>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

</body>
</html>

通过display指定弹性容器

display：flex 布局的元素格式将会成为块级元素的格式
display：inline-flex 布局的元素格式将会成为行内和行内块元素的格式

Flex的属性
flex轴是一个坐标轴有xy轴，在坐标轴中分为主轴和侧轴（交叉轴）默认主轴为x轴那么交叉轴为y，如果主轴改为y那么交叉轴将会变为x。

flex-direction 控制主轴的方向

row正序行 x轴排列正序（默认）

row-reverse 倒序行

column 正序列 y轴排列正序

column-reverse 到序列

flex-wrap子项是否可以换行
我来讲解一下哈，就是当一行放不下的时候是否另起一行，默认是不起一行将各个盒子的宽度缩小一下挤挤放下得了。
warp是换行另起一行来放不改变子项目的（这里我说一下项目是指flex盒子的子类叫做项目）的宽度

nowrap 不换行(默认)

wrap 换行

wrap-reverse 倒置换行

flex-flow 同时指定方向和换行模式

flex-flow：

justify-content 主轴方向的排列方式
作用：用于调节子项在主轴上的摆放方式及子项间的间隙

flex-start 头对齐

fledx-end尾对齐

center 居中

space-between 两端对齐，间隙平均

space-around 每个元素自带前后间隔

space-evenly 平均间隔

align-items 设置侧轴（交叉轴）上的子元素排列方式(单行)

flex-start 从上到下

flex-end 从下到上

center 挤在一起垂直居中

当主轴居中与侧轴居中一块用就是垂直水平居中了

stretch 拉伸（默认值）

flex子盒子不设置高度使用stretch即可实现拉伸

baseline 基线对齐

通过字体的中间基线对齐

align-content 行列多行排列方式（多行）

flex-start 多行头对齐

flex-end 多行尾对齐

center 多行居中

stretch 多行拉伸

space-between 两端对齐、间隙平均两边的元素贴合边框

space-around 两端对齐、间隙平均所有的元素上下左右间隙相等

flex布局子项常见属性
flex属性定义子项目分配剩余空间，用flex表示占多少份数
flex:1 是指占一份当一个父div中有三个子元素都是flex：1是指分成三等份。

============
align-self 交叉轴（侧轴）上的排列方式
弹性子项的选项

order 属性定义项目的排列顺序
order: -1; 默认0 -1比0小就能排前面。
数值越小，排列越靠前，默认为。
注意：和z-index不一样。

<style type="text/css">
    div{
        height: 400px;
        width: 70%;
        display: flex;
        align-items: flex-start;
        background-color: pink;
    }
    span{
        width: 150px;
        height: 100px;
        background-color: purple;
        margin-right: 5px;
    }
    div span:nth-child(3){
        align-self: flex-end;
    }
</style>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

flex-grow 填充容器剩余空间
当子项小于flex容器时进行填充容器
CODE

.parent{
                display: flex;
                width: 200px;
                border: 3px dashed #CCCCCC;
            }
                
            .child{
                padding: 10px;
                border: 2px solid #000000;
            }
<div class="parent">
            <div class="child">A</div>
            <div class="child">B</div>
            <div class="child">C</div>
        </div>

flex-grow 每个子项均匀拉伸填满剩余空间

flex：1 与flex-grow：1的区别

flex = 1 的时候，设置了三个属性

flex-grow=1，flex-shrink=1，flex-basis=0%

只设置 flex-grow =1 的时候

flex-grow=1，flex-shrink=1（默认值），flex-basis=auto（默认值）

当flex:1 时也就是 flex-basis为0时,item元素所占空间不受width的影响

当 flex-grow设置为1时，我们自己设置的width可以生效

flex-shrink 空间不足时做出让步
可以明确告诉浏览器每个子选项分别让步多少
flex-shrink: 2; 默认是1

flex-basis 弹性子项的基础尺寸
默认情况下flex-basis：auto 指定元素的宽和高
如果宽高也为auto那么内容的多少决定 flex-basis的宽度
flex-basis: 35px; 设置宽度35px

传统布局与Flex布局

评论