CSS之flex使用代码

最新推荐文章于 2024-04-16 19:33:42 发布
^s_q
最新推荐文章于 2024-04-16 19:33:42 发布
阅读量317
点赞数 1
文章标签： css css3 html
本文链接：https://blog.csdn.net/qianhoushuiqi/article/details/122592624
版权
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        h1,
        h2,
        h3,{
            text-align: center;
			background-color:rgb(170, 85, 127);
			height:50px;
			font-size:30px;
			font-family:"华文彩云";
			padding-top:20px;
        }
		
		h4{
			font-size: 30px;
			background:#FFFF00;
			text-align: center;
		}
		
        * {
            margin: 5px;
        }
		
		div{
			 background-color: #ddffe8;
		}
		
		div *{
			font-size: 30px;
			background-color: #808080;
		}
        
        .div0 {
            /*要先设置为display为flex在指定相应的flex的具体属性*/
            font-size: 30px;
            background-color: #ddffe8;
            display: flex;
            flex-direction: row-reverse;
        }
        
        .div0 * {
            text-align: center;
            width: 40px;
            height: 40px;
            background-color: #808080;
            margin-left: 3px;
        }
		
		.div1{
			display:flex;
			flex-wrap:wrap-reverse;
		}
		
		.div1 div{
			width:40px;
			height:50px;
			margin-left:90px;
			text-align:center;
			
		}
		
		.div2{
			display: flex;
			flex-flow: row-reverse wrap;
		}
		
		.div2 div{
			width:40px;
			height:40px;
			text-align:center;
			margin-left: 200px;
		}
		
		.div3{
			display: flex;
			/*分散排列*/
			justify-content: space-between;
		}
		
		.div3 div{
			width:40px;
			height:40px;
			text-align:center;
		}
		
		.div4{
			display: flex;
			width:100%;
			height:300px;
			align-items: center;/*垂直方向显示在中间*/
		}
		
		.div4>div{
			padding-top:5px;
			text-align:center;
			width:250px;
			/* height:50px; */
		}
		
		.div5{
			display:flex;
			width:auto;
			height:300px;
		}
		
		.div51{
			order: 2;
		}
		
		.div52{
			order: 1;
		}
		
		.div5 div{
			width:40px;
			height:auto;/*这个时候align-items默认是stretch*/
		}
		
		.div6{
			width:100%;
			height:200px;
			background-color:#00FFFF;
			display: flex;
		}
		
		.div61{
			width:40px;
			height:50px;
			padding-left:15px;
			padding-top:10px;
			flex-grow: 1;
		}
		
		.div62{
			width:40px;
			height:50px;
			padding-left:15px;
			padding-top:10px;
			flex-grow: 2;
		}
		/*62和61的宽度比例是1:2*/
		
		.div7{
			height:400px;
			width:auto;
			background-color:#FFFF00;
			display:flex;
			align-items:center;
		}
		
		.div7 div{
			width:400px;
			height:40px;
			display: flex;
			justify-content: center;
			align-items:center;
			
		}
		
		.div71{
			flex-shrink:0;
		}
		
		.div72{
			flex-shrink: 2;
		}
		
		.div73{
			flex-shrink: 3;
		}
		
		.div74{
			flex-shrink: 4;
		}
		
		.div8{
			display: flex;
			flex: row;
			width:auto;
			height:200px;
			align-items: flex-start;
		}
		
		.div8 div{
			width:40px;
			height:40px;
			text-align: center;
		}
		
		.div81{
			align-self: flex-end;
		}
		
		.div82{
			
		}
		
		.div83{
			align-self:center;
		}
		/* 以上就是全部的flex的使用 */
    </style>
</head>

<body>
    <h3>flex-direction的设置</h3>
    <div class="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
	<h3>flex-wrap的使用</h3>
	<p>flex-wrap:就是设置是否要换行,nowrap:不换行</p>
	<p>wrap:换行，wrap-reverse:反过来换行（就是将行的顺序反过来）</p>
	<div class="div1">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
	</div>
	<h3>上面两个的简写：flex-flow</h3>
	<p>flex-flow分开后就是flex-direction和flex-wrap，默认值是row nowrap</p>
	<div class="div2">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
	<h3>justify-content的使用</h3>
	<p>justify-content:就是看是否在x轴（main横向）中间</p>
	<p>属性值：center：中间，space-around:间距相等，flex-start：左对齐，flex-end：右对齐，space-between:两端对齐</p>
	<div class="div3">
		<div>1</div>
		<div>2</div>
	</div>
	<h3>align-items:交叉线对齐（y轴方向）</h3>
	<p>属性值说明：center：显示在中间flex-start从上面0点开始，flex-end：从下面的起点开始，baseline项
	目的第一行文字的基准线对齐，stretch：高度没有设置或者设置为auto就会占满容器的整个高度</p>
	<div class="div4">
		<div>中间显示</div>
	</div>
	<h4>stretch展示：另外一个HTML文件里面</h4>
	<h3>align-content:暂时不需要使用</h3>
	<h3>order属性的使用</h3>
	<p>order属性定义元素的顺序，默认为0，越小越靠前</p>
	<div class="div5">
		<div class="div51">1</div>
		<div class="div52">2</div>
	</div>
	<h3>flex-grow:用来描述是否要放大0：不放大，其他数值表示的是占用的比例，只有一个的时候X方向（main）填满</h3>
	<div class="div6">
		<div class="div61">1</div>
		<div class="div62">2</div>
	</div>
	<h3>flex-shrink的使用</h3>
	<p>flex-shrink值为0表示的是不收缩，即不管，但是当shrink为非0的时候就会按照相应的比例来缩放</p>
	<div class="div7">
		<div class="div71">1</div>
		<div class="div72">2</div>
		<div class="div73">3</div>
		<div class="div74">4</div>
	</div>
	<h3>flex-basis</h3>
	<p>flex-basis:默认值是auto这个就是项目本来的大小，浏览器根据这个属性，计算主轴是否有多于的空间</p>
	<h3>align-self:字如其名，这个属性就是设置一个元素让其鹤立鸡群</h3>
	<p>就是让一个元素的布局可以不和父类里面的元素的一样，不受父类的align-items的影响</p>
	<div class="div8">
		<div class="div81">1</div>
		<div class="div82">2</div>	
		<div class="div83">3</div>
	</div>
	<h3>flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</h3>
	<script></script>
</body>

</html>