弹性布局

最新推荐文章于 2019-01-08 11:07:21 发布

置顶 Mr Gong

最新推荐文章于 2019-01-08 11:07:21 发布

阅读量369

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/GYZ_Code/article/details/74586618

CSS 专栏收录该内容

8 篇文章

订阅专栏

这里写图片描述

容器的属性：

        1.flex-direction 通过定义主轴的方向来确定项目的排列方向    

            row（默认值）    主轴为水平方向，起点在左端
            row-reverse     主轴为水平方向，起点在右端
            column          主轴为垂直方向，起点在上沿
            columcn-reverse 主轴为垂直方向，起点在下沿

        2.flex-wrap  默认情况下，项目都排在轴线上。flex-wrap属性定义,如果一条轴线排不下，如何换行

            nowrap(默认值)  不换行
            wrap            换行，第一行在上方
            wrap-reverse    换行，第一行在下方

        3.justify-content   定义了项目在主轴上(水平方向)的对齐方式

            flex-start（默认值）     左对齐
            flex-end                右对齐
            center                  居中
            space-between           两端对齐,第一个项目与行的起始位置的边界对齐，最后一个项目与行的位置的边界对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。如果最左边的剩余空间是负数或该行只有一个子元素，则该值等效于'flex-start'

            space-around            
                                    项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍,如果最左边的剩余空间是负数或该行只有一个伸缩盒项目，则该值等效于'center'


        4.align-items   定义单行项目在交叉轴上(垂直方向)如何对齐 


            stretch（默认值）        如果项目未设置高度或设为auto，将占满整个容器的高度,如果项目设置了高度，则效果等同于flex-start  

            flex-start              交叉轴的起点对齐
            flex-end                交叉轴的终点对齐
            center                  交叉轴的中点对齐
            baseline                项目第一行文字的基线对齐


        5.align-content 定义多行项目在交叉轴上(垂直方向)的对齐方式。如果项目只有一行，该属性不起作用  


            stretch（默认值）    各行将会伸展以占用剩余的空间。
            flex-start          与交叉轴的起点对齐,每一行都紧靠住前面一行
            flex-end            与交叉轴的终点对齐,每一行都紧靠住前面一行
            center              与交叉轴的中点对齐,各行两两紧靠住同时在弹性盒容器中居中对齐
            space-between       与交叉轴两端对齐，轴线之间的间隔平均分布
            space-around        每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍



        项目的属性：

        1. order 定义项目的排列顺序。数值越小，排列越靠前，默认为0

        2.flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

        3.flex-shrink   定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

        4.flex-basis    定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

        5.flex  

            flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto 后两个属性可选

            该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

            建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值


        6.align-self

            属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。该属性可能取6个值，除了auto，其他都与align-items属性完全一致
            auto（默认值）   表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
            flex-start      交叉轴的起点对齐
            flex-end        交叉轴的终点对齐
            center          交叉轴的中点对齐
            baseline        项目第一行文字的基线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <title>弹性盒子模型</title>
    <style type="text/css">

        #box
        {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 60px auto 0;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap; 
            align-items: center;
        }
        #box div{width: 98px;height: 98px; background: red;border: 1px solid #fff;}
        #box div:nth-of-type(4){align-self: flex-start;}
        #box div:nth-of-type(3){order:-1;}
    </style>
</head>
<body>

    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>    
    </div>

</body>
</html>