怎样经由过程flex举行网页规划【html5教程】

2019-11-26HTML搜搜PHP网61°c

A⁺ A^-

flex称为弹性规划，当父元素设置为flex值后子元素会自动成为其成员，再经由过程设置属性值来完成种种规划结果。例经由过程给父元素设置justify-content属性完成程度垂直居中结果

经由过程Flex能够轻便、完全、相应式地完成种种页面规划。跟着浏览器的生长，如今，它已得到了一切浏览器的支撑，这意味着，如今就可以很安全地运用这项功用。接下来将和人人分享怎样经由过程flex举行网页规划

【引荐课程：CSS教程】

flex规划

称为"弹性盒模子"，当父容器设置了display：flex时，子元素自动成为其成员，容器默许存在两根轴：程度方向的主轴和垂直的交织轴，项目默许沿主轴分列。

flex容器(父容器)的一些属性：

flex-direction：决议主轴的方向（即项目的分列方向）

flex-wrap：假如一条轴线排不下，怎样换行

flex-flow：是flex-direction属性和flex-wrap属性的简写情势，默许值为row nowrap

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

align-items：定义项目在交织轴上怎样对齐

align-content：定义了多根轴线的对齐体式格局。假如项目只要一根轴线，该属性不起作用

实例

flex完成程度垂直居中

* {
            margin: 0;
            padding: 0;
        }

html {
            width: 100%;
            height: 100%;
        }
 body {
            display: flex;
            width: 100%;
            height: 100%;
            background: #eee;
            justify-content: center;
            align-items: center;
        }
 .box {
            width: 200px;
            height: 200px;
            background:pink;
        }

结果图：

两列等高规划：

左侧牢固宽度，右侧占有盈余宽度：

<style>
    *{
        margin: 0;
        padding:0;
    }
    .grid{
        display: flex;
        border: 1px solid #ccc;
    }
    .left{
    
        background-color:pink;
        flex-basis: 200px;
}
    .right{
    
        background-color:skyblue;
        flex-basis:calc(100% - 200px);
    }
</style>

结果图：