css3--flex弹性布局--弹性容器上的属性--flex-direction、justify-content、align-items、flex-wrap

默认的布局，block的宽度和父容器保持100%，高度由内容撑高。

flex布局，block的宽度默认由内容撑宽，高度和父容器保持100%。还顺带修复了margin导致父容器下降的布局问题。

flex布局属性众多，分为两拨，一部分用在flex container弹性容器上面，一部分用在flex items弹性项目（弹性内容）上面，但是都是用来控制flex items的呈现方式。

弹性容器的子元素和父元素 之间 一定是父子，不能祖先！

 flex-direction: row;

flex-direction: column;

主轴方向的设置(默认是row水平方向，省略不写; column垂直方向)

justify-content: center;

justify-content:space-between;

主轴方向上的内容对齐方式 --- 这个属性主要用在水平方向上的

主轴方向上的内容的显示方式：center内容水平居中;space-between内容均匀分布

align-items: center;

主轴上的内容垂直方向上 居中显示

flex-wrap: wrap;

主轴换行设置，默认不换行 nowrap不换行；wrap换行;使用这个属性的大前提一定是：空间不足

弹性容器内容，弹性项目居中显示：

html

    <div class="parent">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
    </div>

css

        .parent{
            width: 900px;
            height: 400px;
            border: 2px solid blue;
            margin: 0 auto;
            /* 将普通容器 转换 成 弹性容器 */
            display: flex;
            /* 1.主轴方向的设置(默认是row水平方向，省略不写; column垂直方向) */
            /* flex-direction: row; */
            /* flex-direction: column; */
            /* 2. 主轴方向上的内容对齐方式 --- 这个属性主要用在水平方向上的 */
            justify-content: center;
            /* 3.主轴上的内容垂直方向上 居中显示 */
            align-items: center;
        }
        .son1,.son2{
            width: 260px;
            height: 260px;
        }
        .son1{
            background-color: lightcoral;
        }
        .son2{
            background-color: lightseagreen;
        }

预览：

弹性容器内，弹性项目均匀分布

html

    <div class="list-item-ico">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

css

 /* 注意：弹性容器的子元素和父元素 之间 一定是父子，不能祖先！ */
        .list-item-ico ul{
            width: 1130px;
            height: auto;
            margin: 0 auto;
            overflow: hidden;
            outline: 1px dashed red;
            /* 将普通容器 转换 成 弹性容器 */
            display: flex;
            flex-direction: row;
            /* 主轴方向上的内容的显示方式：center内容水平居中;space-between内容均匀分布 */
            justify-content:space-between;

            align-items: center;

            /* 主轴换行设置，默认不换行 nowrap不换行；wrap换行;使用这个属性的大前提一定是：空间不足 */
            flex-wrap: wrap;
        }
        .list-item-ico ul li{
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 50%;
            list-style: none;
        }

预览