Flex 布局的规则及演示 -

布局的传统解决方案，基于盒子模型，依赖 display + position + float，某些特殊布局很不方便，比如，垂直居中就不容易实现，为了解决这个问题，我们学习了flex弹性盒子

一.Flex 布局是什么？

1.任何元素都可以通过添加display: flex属性,转为弹性盒元素,也叫flex容器
2.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
3.转为flex元素后,它的内部的”子元素”就支持flex布局了
4.flex容器中的”子元素”称之为: flex项目
5.所有容器中的项目自动变成”行内块级元素”

二.容器的属性：

flex-direction：决定主轴的方向

1：默认值row （水平方向）
2：column （垂直方向）。

flex-wrap：决定换不换行

1：默认值nowrap（不换行）
2：wrap(换行) 。

flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content：定义了项目在主轴上的对齐方式

1.flex-start（默认值）左对齐
2.flex-end右对齐
3.center居中
4.space-between二端对齐
5.space-around分散对齐
6.space-evenly平均对齐。

align-items: 定义项目在交叉轴上如何对齐

1.stretch默认拉伸
2.flex-start交叉轴的起点对齐
3.flex-end：交叉轴的终点对齐
4.center：交叉轴的中点对齐

align-content：性定义了多根轴线的对齐方式。

1.stretch（默认值）：轴线占满整个交叉轴
2.flex-start：与交叉轴的起点对齐
3.flex-end：与交叉轴的终点对齐
4.center：与交叉轴的中点对齐
5.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
6.space-around：每根轴线两侧的间隔都相等

三.项目的属性：

1：项目属性flex：通常用来设置某一个项目的特征
放大因子：flex-grow，收缩因子： flex-shrink，项目在主轴上的基准宽度flex-basis
默认值flex: 0 1 auto或者flex: initial：不会放大或收缩，允许放大和收缩：flex: 1 1 auto，禁止放大或收缩：flex: 0 0 auto;

2：order：定义单个项目在所有项目中的排列顺序。数值越小，排列越靠前，默认为0。

3:align-self定义单个项目在交叉轴上的对齐方式

以下我们通过实例来进行演示以下我们通过实例来进行演示

1：justify-content主轴对齐：

    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        .demo1{
            margin:1em;
            padding:.5em;
        }
        .demo1>.content{
            width:30em;
            height: 6em;
            background-color:yellow;
            display: flex;
            /* 主轴左对齐： */
            justify-content: flex-start;
            /* 主轴右对齐 */
            justify-content: flex-end;
            /* 主轴居中对齐： */
            justify-content: center;
            /* 主轴二端对齐： */
            justify-content:space-between;
            /* 主轴分散对齐： */
            justify-content:space-around;
            /* 主轴平均对齐： */
            justify-content: space-evenly;
        }
        .demo1>.content>.box{
            height: 2em;
            width: 2em;
            background-color:skyblue;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="demo1">
        <div class="content">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
</div>
</body>
</html>

运行结果：

2.交叉轴对齐方式演示：
代码；

    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        .demo1{
            margin:1em;
            padding:.5em;
        }
        .demo1>.content{
            width:30em;
            height: 6em;
            background-color:yellow;
            display: flex;
            justify-content: space-around;
            /* 默认拉伸 */
            align-items: stretch;
            /* 交叉轴起点对齐： */
            align-items: flex-start;
            /* 交叉轴终点对齐： */
            align-items: flex-end;
            /* 交叉轴居中对齐： */
            align-items: center;
        }
        .demo1>.content>.box{
            /* height: 2em; */
            width: 2em;
            background-color:skyblue;
            border: 1px solid #000;
        }
        /* 使某个项目改变在元素中的顺序 */
        .demo1>.content>.box:nth-of-type(4){
            order: 1;
        }
    </style>
</head>
<body>
    <div class="demo1">
        <div class="content">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
</div>
</body>

代码运行结果如下：