lovecoding
/
W0407


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 800px;
            height: 900px;
            border: 3px solid #000;
            /* 开启弹性盒 */
            display: flex;
            justify-content: center;
            /* flex-wrap: wrap; */
            align-items: center;
            /* flex-flow: row-reverse wrap; */
            /* flex-wrap: wrap-reverse; */
            /* flex-direction: column-reverse; */
            /* display: inline-flex; */
            /* display: -webkit-flex; */
        }
        #box1,#box2,#box3 {
            width: 200px;
            height: 300px;
        }
        #box1 {
            background: #00f;
            /* display: flex; */
        }
        #box2 {
            background: #0ff;
        }
        #box3 {
            background: #0f0;
        }
    </style>
</head>
<body>
        <!-- 
        Flex 弹性布局
        Flex属性分为两部分，一部分作用于容器称""容器属性"",另一部分作用于项目称为""项目属性"";
        display:flex; 开启弹性盒
        display:-webkit-flex; 开启对应内核浏览器的弹性盒
        display:inline-flex; 开启行内的弹性盒
        注意:设置为flex布局后，子元素的float、clear、vertical-align属性将失效;

        容器属性：
            1.flex-direction
                决定主轴的方向(项目的排列方向)
                .box {
                    flex-direction:row|row-reverse|column|column-reverse;
                }
                row(默认) 从左向右排列,主轴为水平方向，起点在左端
                row-reverse 从右向左排列,主轴为水平方向,起点在右端
                column 从上向下排列,起点在上沿
                column-reverse 从下向上排列,起点在下沿
            2.flex-wrap
                默认情况下，Flex项目都排在一条线上，又称"轴线"上；
                我们可以通过flex-wrap属性设置，让Flex项目换行排列；
                .box {
                    flex-wrap:nowrap|wrap|warp-reverse;
                }
                    nowrap(默认):不换行;所有Flex项目单行排列：
                    wrap:换行,第一行在上方;所有Flex项目多行排列,按从上到下的顺序;
                    wrap-reverse:换行,第一行在下方;所有Flex项目多行排列,按从下到上的顺序;
            3. flex-flow
                    是flex-direction属性和flex-wrap属性的间歇性是，默认值为row nowrap;
                    .box {
                        flex-flow:<flex-direction><flex-wrap>;
                    }
            4. justify-content属性定义了项目在主轴上的对齐方式;
                    .box {
                        justify-content:flex-start|flex-end|center|space-between|space-around;
                    }
                    flex-start(默认):左对齐;
                    flex-end:右对齐;
                    center:居中;
                    space-between:两端对齐，项目之间间隔相等;
                    space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距  离是两个项目之间留白的和;
                    space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等;
            5. align-items
                    属性定义项目在交叉轴上的对齐方式。
                    .box {
                        align-items: stretch | flex-start | flex-end | center | baseline;
                    }
                    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
                    flex-start：交叉轴的起点对齐。
                    flex-end：交叉轴的终点对齐。
                    center：交叉轴的中点对齐。
                    baseline: 项目的第一行文字的基线对齐。
            注意: Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。
            注意: Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。
            注意:Internet Explorer, Firefox, 和 Safari 浏览器不支持 align-content 属性。

     -->
        <div id="box">
            <div id="box1">
                <p>1</p>
                <p>2</p>
                <p>3</p>
            </div>
            <!-- <div id="box2">2222</div>
            <div id="box3">3333</div>
            <div id="box1">
                <p>1</p>
                <p>2</p>
                <p>3</p>
            </div>
            <div id="box2">2222</div> -->
            <!-- <div id="box3">3333</div> -->
        </div>
</body>
</html>