弹性盒子布局

弹性盒子布局
一、什么是弹性盒子布局

什么是弹性盒子布局：

　1、弹性盒子是CSS3的一种新布局模式

　 2、代替浮动使布局更加简便

　 3、对齐方式包含了水平方向和垂直方向；

　 4、弹性项目可以通过css重新排序

基本概念：

　创建Flex容器(flex container) ——display: flex;

 

 

二、弹性布局的基础属性

HTML:

 

<div id="container">
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
        <div class="item">
            <h3>item 1</h3>
        </div>
        <div class="item">
            <h3>item 2</h3>
        </div>
        <div class="item">
            <h3>item 3</h3>
        </div>
    </div>

 

 

 

　1.flex-direction

#container {
            display: flex;
            /* 默认值：row 横向进行排列 左 */
            flex-direction: row;
            /* 纵向进行排列 */
            /* flex-direction: column; */
            /* 反向排列 右 */
            /* flex-direction: row-reverse; */
            flex-wrap: wrap;
        }

2.flex：； （占比）

flex: 2;

3.flex-wrap: wrap;（自动换行）

flex-wrap: wrap;

4.结合：flex-flow: row wrap;（纵向排列）

flex-flow: row wrap;

三、弹性布局的对齐和排序

1、在主轴上的对齐方式

HTML：

 <div id="container">
        <div class="item item-1">
            <h3>Item 1</h3>
        </div>
        <div class="item item-2">
            <h3>Item 2</h3>
        </div>
        <div class="item item-3">
            <h3>Item 3</h3>
        </div>
    </div>

CSS：

/* 在主轴上的对齐方式 */
            /* 左对齐 */
            /* justify-content: flex-start; */
            /* 右对齐 */
            /* justify-content: flex-end; */
            /* 居中对齐 */
            /* justify-content: center; */
            /* 间隔相等 */
            /* justify-content: space-around; */
            /* 项目与项目之间的间隔相等 */
            /* justify-content: space-between; */
            /* 均匀排列 */
            justify-content: space-evenly;

2.项目交叉轴的对齐方式（需要设置高度）

 height: 600px;
            background: #555;
            /* 项目交叉轴的对齐方式（需要设置高度） */
            /* 交叉轴起点对齐 */
            /* align-items: flex-start; */
            /* 交叉轴终点对齐 */
            /* align-items: flex-end; */
            /* 交叉轴居中对齐 */
            /* align-items: center; */
            align-items: baseline;

3.轴线对齐

/* 所有项目起点对齐 */
            /* align-content: flex-start; */
            /* 所有项目终点对其 */
            /* align-content: flex-end; */
            /* 所有项目居中对其 */
            /* align-content: center; */
            /* 两根轴线之间间隔相等 */
            /* align-content: space-around; */
            /* 按照交叉轴的两端对齐 轴线之间的间隔进行平分 */
            /* align-content: space-between; */
            /* 默认值 */
            align-content: stretch;

4.项目单个对齐：

HTML：

<div id="container">
        <div class="item item-1">
            <h3>Item 1</h3>
        </div>
        <div class="item item-2">
            <h3>Item 2</h3>
        </div>
        <div class="item item-3">
            <h3>Item 3</h3>
        </div>

    </div>

 

CSS：

/* 项目单个对齐 */
        .item-2 {
            align-self: flex-end;
            /* align-items: auto; （默认值） */
            /* align-items: flex-start; */
            /* align-items: stretch; */
            /* align-items: center; */

        }

5.排序：

CSS：

 /* 排序 */
        .item-1 {
            order: 3;
        }

        /* 项目单个对齐 */
        .item-2 {
            align-self: flex-end;
            order: 2;
        }

        .item-3 {
            order: 1;
        }