布局：flex弹性布局_实践01 

<!doctype html>
<html>
　　<head>
   　　 <meta charset="utf-8" />
    　　<title>H5标准页面</title>
    　　<link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />
　　</head>

　　<body>

    　　<section>
       　　 <article>
          　　  <div>1</div>
       　　 </article>
   　　 </section>

　　</body>

</html
section{
    position:absolute;
    height:100%;
    width:100%;
    background-color:pink;
    display:-webkit-flex;
    display:flex;
    justify-content:center;
    align-items:center;
}

article{
    height:200px;
    width:200px;
    background-color:deeppink;
    margin:10px;
}

 

<!doctype html>
<html>
　　<head>
	<meta charset="utf-8" />
	<title>H5标准页面</title>
	<link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />
　　</head>

　　<body>
	<section>
		<article>
			<div>1</div>
		</article>
		<article>
			<div>2</div>
		</article>
	</section>
　　</body>
</html>

　

section{
    position:absolute;
    height:100%;
    width:100%;
    background-color:pink;
    display:-webkit-flex;
    display:flex;
    justify-content:space-between;
}

article{
    height:200px;
    width:200px;
    background-color:deeppink;
    margin:10px;
}

article:nth-child(2){
    align-self:flex-end;
}

 

<!doctype html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>H5标准页面</title>
    <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />
　　</head>

　　<body>
   　　<section>
        　　<article>
            　　<div>1</div>
　　        </article>
   　　     <article>
      　　      <div>2</div>
        　　</article>
　　        <article>
   　　         <div>3</div>
      　　  </article>
    　　</section>
　　</body>
</html
section{
    position:absolute;
    height:100%;
    width:100%;
    background-color:pink;
    display:-webkit-flex;
    display:flex;
    justify-content:space-between;
}

article{
    height:200px;
    width:200px;
    background-color:deeppink;
    margin:10px;
}

article:nth-child(2){
    align-self:center;
}

article:nth-child(3){
    align-self:flex-end;
}

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>H5标准页面</title>
    <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />
</head>

<body>
    <section>
        <div class="customWrap">
            <article>
                <div>1</div>
            </article>
            <article>
                <div>2</div>
            </article>
        </div>
        <div class="customWrap">
            <article>
                <div>3</div>
            </article>
            <article>
                <div>4</div>
            </article>
        </div>
    </section>
</body>

</html>
section{
    position:absolute;
    height:100%;
    width:100%;
    background-color:pink;
    display:-webkit-flex;
    display:flex;
    justify-content:space-between;
}

.customWrap{
    display:-webkit-flex;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

article{
    height:200px;
    width:200px;
    background-color:deeppink;
    margin:10px;
}

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>H5标准页面</title>
    <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />
</head>

<body>
    <section>

        <div class="customWrap">
            <article>
                <div>1</div>
            </article>
            <article>
                <div>2</div>
            </article>
        </div>

        <div class="customWrap">
            <article>
                <div>5</div>
            </article>
        </div>

        <div class="customWrap">
            <article>
                <div>3</div>
            </article>
            <article>
                <div>4</div>
            </article>
        </div>
    </section>
</body>

</html>
section{
    position:absolute;
    height:100%;
    width:100%;
    background-color:pink;
    display:-webkit-flex;
    display:flex;
    justify-content:space-between;
}

.customWrap{
    display:-webkit-flex;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.customWrap:nth-child(2){
    justify-content:center;
}

article{
    height:200px;
    width:200px;
    background-color:deeppink;
    margin:10px;
}

 

posted on 2019-08-09 17:22  九涅  阅读(197)  评论(0)    收藏  举报

导航