• 弹性盒子嵌套


    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>
    		弹性布局嵌套:
    			1,谨记:由外向内进行设置弹性盒子。先设置外部弹性布局,然后在设定里面的布局即可。

    <!-- 圣杯布局的要求
    -- 纵向分为上中下三部分,上中下宽度100%,上下高度固定;中间部分高度自动。
    -- 中间被拆分为三栏:左右宽度固定,中间自适应;
    -->

    	</title>
    </head>
    <style>
    	/* 1,以下是给弹性盒子设置主轴及其方向设置flex-direction: row;
    	2,通过.column不设置宽度(由内容撑开),来设置排列方式。 */
    	.flex-container-one{
    		 500px;
    		height: 500px;
    		background: #B6B67B;
    		margin: auto;
    		margin-top: 50px;
    		display: flex;
    		flex-direction: row;
    		justify-content: space-evenly;
    	}
    	.column{
    		display: flex;
    		background: #439290;
    		flex-grow: 0;
    		flex-shrink: 0;
    		flex-basis: 0;
    		flex-wrap: nowrap;
    		flex-direction: column;
    		justify-content: space-evenly;
    		/*align-content: space-evenly;*/
    	}
    	 .flex-row-item{
    	 	display: inline-block;
    		 100px;
    		height: 100px;
    	}
    	 .flex-item-111{
    	 	background: #ff0;
    	 }
    	 .flex-item-222{
    	 	background: #0f0;
    	 }
    	 .flex-item-333{
    	 	background: #f00;
    	 }
    
    
    	/* 1,以下是给弹性盒子设置主轴及其方向设置flex-direction: row;
    	2,通过设置是.row的宽度100%,并且可以换行来修改排列方式 */
    	.flex-container-two{
    		margin-top: 50px;
    		/* 500px;*/
    		height: 500px;
    		display: flex;
    		flex-wrap: wrap;
    		flex-direction: row;
    		justify-content: center;
    		background: #eee;
    		align-content: space-evenly;
    	}
    	.row{
    		 100%;
    		height: 100px;
    		background: #ff0;
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		justify-content: space-evenly;
    		/*align-content: space-evenly;*/
    	}
    	.flex-row-item-one{
    		 100px;
    		height: 100px;
    		background: #7B1010;
    		overflow: hidden;
    		align-self: center;
    	}
    
    	/* 1,给弹性盒子设置主轴及其方向:flex-direction:column;
    	2,在子元素内再进行设置弹性盒子 */
    	.flex-container-three{
    		 500px;
    		height: 500px;
    		background: #eee;
    		margin: auto;
    		margin-top: 30px;
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: column;
    		justify-content: space-evenly;
    	}
    	.row-three{
    		height: 100px;
    		background: #f00;
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		justify-content: space-evenly;
    		align-content: center;
    	}
    	.flex-row-item-three{
    		 100px;
    		height: 100px;
    		background: #0f0;
    		text-align: center;
    		line-height: 100px;
    		overflow: hidden;
    	}
    
    </style>
    <body>
    	<div class="flex-container-one">
    		<div class="column">
    			<div class="flex-item-111 flex-row-item ">flex-item0001</div>
    			<div class="flex-item-111 flex-row-item ">flex-item0001</div>
    			<div class="flex-item-111 flex-row-item ">flex-item0001</div>
    		</div>
    		<div class="column">
    			<div class="flex-item-222 flex-row-item ">flex-item0002</div>
    			<div class="flex-item-222 flex-row-item ">flex-item0002</div>
    			<div class="flex-item-222 flex-row-item ">flex-item0003</div>
    		</div>
    		<div class="column">
    			<div class="flex-item-333 flex-row-item ">flex-item0003</div>
    			<div class="flex-item-333 flex-row-item ">flex-item0003</div>
    			<div class="flex-item-333 flex-row-item ">flex-item0003</div>
    		</div>
    	</div>
    
    	<div class="flex-container-two">
    		<div class="row">
    			<span class="flex-row-item-one flex-row-item-1">flex-row-item 1</span>
    			<span class="flex-row-item-one flex-row-item-2">flex-row-item 1</span>
    			<span class="flex-row-item-one flex-row-item-3">flex-row-item 1</span>
    		</div>
    		<div class="row">
    			<span class="flex-row-item-one flex-row-item-1">flex-row-item 2</span>
    			<span class="flex-row-item-one flex-row-item-2">flex-row-item 2</span>
    			<span class="flex-row-item-one flex-row-item-3">flex-row-item 2</span>
    		</div>
    		<div class="row">
    			<span class="flex-row-item-one flex-row-item-1">flex-row-item 3</span>
    			<span class="flex-row-item-one flex-row-item-2">flex-row-item 3</span>
    			<span class="flex-row-item-one flex-row-item-3">flex-row-item 3</span>
    		</div>
    	</div>
    
    	<div class="flex-container-three">
    		<div class="row-three">
    			<span class="flex-row-item-three flex-row-item-1">flex-row-item 1</span>
    			<span class="flex-row-item-three flex-row-item-2">flex-row-item 1</span>
    			<span class="flex-row-item-three flex-row-item-3">flex-row-item 1</span>
    		</div>
    		<div class="row-three">
    			<span class="flex-row-item-three flex-row-item-1">flex-row-item 2</span>
    			<span class="flex-row-item-three flex-row-item-2">flex-row-item 2</span>
    			<span class="flex-row-item-three flex-row-item-3">flex-row-item 2</span>
    		</div>
    		<div class="row-three">
    			<span class="flex-row-item-three flex-row-item-1">flex-row-item 3</span>
    			<span class="flex-row-item-three flex-row-item-2">flex-row-item 3</span>
    			<span class="flex-row-item-three flex-row-item-3">flex-row-item 3</span>
    		</div>
    	</div>
    </body>
    </html>
    

      

  • 相关阅读:
    2018/01/01Java基础学习——如何通过dos系统的javadoc命令生成API文档
    Go语言的big包实现大整数运算
    HDU5100 Chessboard【组合数学】
    HDU5143 NPY and arithmetic progression【暴力】
    UVALive5402 UVA579 Clock Hands【水题】
    UVA11799 Horror Dash【求极值+水题】
    HDU1017 ZOJ1152 A Mathematical Curiosity【暴力】
    UVALive2536 POJ1248 HDU1015 ZOJ1403 Safecracker【密码+暴力】
    POJ1284 Primitive Roots【原根】
    UVA11340 Newspaper【输入流+map】
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/12389390.html
Copyright © 2020-2023  润新知