一段代码看全CSS Flex布局

<html>
<head>
<style type="text/css">

.contents{
    width:800px;
    height:200px;
    background:#ffffAA;

    position:fixed;
    bottom:0;
    left:0;

    display: flex;
    /*
    设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
    */
    flex-direction:row-reverse;
    /*
    row(默认值):主轴为水平方向,起点在左端。
    row-reverse:主轴为水平方向,起点在右端。
    column:主轴为垂直方向,起点在上沿。
    column-reverse:主轴为垂直方向,起点在下沿。
    */
    flex-wrap:wrap;
    /*flex-wrap: nowrap | wrap | wrap-reverse;*/
    flex-flow:row nowrap;
    /*属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。*/
    justify-content: flex-start;
    /*
    flex-start(默认值):左对齐
    flex-end:右对齐
    center: 居中
    space-between:两端对齐,项目之间的间隔都相等。
    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    */
    align-items: flex-start;
    /*
    flex-start:交叉轴的起点对齐。
    flex-end:交叉轴的终点对齐。
    center:交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
    */
    align-content:center;
    /*
    flex-start:与交叉轴的起点对齐。
    flex-end:与交叉轴的终点对齐。
    center:与交叉轴的中点对齐。
    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch(默认值):轴线占满整个交叉轴。
    */
}
.contents div{
    width:100px;
    height:100px;
}
.div1{
    background:#ff0000;
    order:1;                /* 排序 默认 0 */
    flex-grow:1;            /* 放大比例 默认 0 */
    flex-shrink:1;          /* 缩小比例 默认 0 */
    flex-basis:100px;       /* 分配多余空间之前,项目占据的主轴空间 */
    flex:1 1 100px;         /* 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。*/
    align-self: flex-end;   /*auto | flex-start | flex-end | center | baseline | stretch*/
}
.div2{
    background:#ffFF00;
    order:2;
}
.div3{
    background:#ff00FF;
    order:1;
}
.div4{
    background:#0000FF;
    order:2;
    
}
.div5{
    background:#00FF00;
    order:2;
}
</style>
</head>

<body>
<div class="contents">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div5">5</div>
</div>
</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容