• 弹性盒子嵌套


    <!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>
    

      

  • 相关阅读:
    【Android笔记】Android操作HTTP实现与服务器通信
    【Android笔记】Android与服务器通信 http和socket两种形式
    【网络编程笔记】简单的TCP协议 socket编程(C语言版服务器和客户端)
    【Web后端笔记】基于Socket实现的简单Web服务器搭建
    【Web前端笔记】css让背景图片拉伸填充的属性
    【Android笔记】ServerSocket 与 Socket的区别
    【Android笔记】Android与服务器数据库通信的方法
    【Android笔记】Android的三种网络通信方式
    【Web后端笔记】jsp传递中文数据出现乱码的问题
    【Web后端笔记】jsp 的四个作用域 :page、request、session和application的区别
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/12389390.html
Copyright © 2020-2023  润新知