lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!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>
        #main {
            width: 1000px;
            height: 800px;
            border: 1px solid #f00;
            /* 开启弹性盒 */
            display: flex;
            flex-wrap: wrap;
            /* flex-direction: column; */
            align-content: space-evenly;
            /* align-items: baseline; */
            /* justify-content: space-evenly; */
            /* flex-flow: row-reverse wrap; */
            /* flex-wrap: wrap-reverse; */
            /* flex-direction: row; */
            /* display: inline-flex; */
        }
        #one {
            width: 500px;
            /* flex: 1; */
            height: 200px;
            background: #0f0;
        }
        #two {
            width: 300px;
            /* flex: 1; */
            height: 200px;
            background: #0ff;
        }
        #three {
            width: 400px;
            /* flex: 1; */
            height: 200px;
            background: plum;
        }
    </style>
</head>
<body>
    <!-- 
        flex:响应式布局 弹性布局 弹性盒子
        容器和项目
        横纵轴
        主轴和交叉轴
        开启弹性盒子  display: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-warp
         默认情况下，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: 项目的第一行文字的基线对齐
        6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
            .box {
            align-content: flex-start | flex-end | center | space-between | space-around | stretch;
            }
            stretch (默认)：拉伸显示
            flex-start：从启点线开始顺序排列
            flex-end：相对终点线顺序排列
            center：居中排列
            space-between：项目均匀分布，第一项在启点线，最后一项在终点线
            space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和
            space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等;
     -->
     <div id="main">
        <!-- <h2>啊哈哈哈</h2> -->
        <div id="one">
        </div>
        <!-- 哈哈 -->
        <div id="two"></div>
        <div id="three"></div>
     </div>
</body>
</html>