CSS flex 属性

最新推荐文章于 2024-06-10 15:38:55 发布

yunduan__

最新推荐文章于 2024-06-10 15:38:55 发布

阅读量131

点赞数 2

文章标签： html 前端 css

本文链接：https://blog.csdn.net/yunduan__/article/details/121535171

版权

flex-basis

flex-basis属性规定弹性项目的初始长度。

那么我们随便写一串简单的代码来看看flex-basis的效果如何

代码如下：

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	  div{
          background:pink;
          width: 250px;
          height: 100px;
          border: 1px solid black;
          display: flex;
	  }
	  .two{
	  	  flex-grow: 0;
          flex-shrink: 0;
          flex-basis: 100px;
          background:red;

	  }
	</style>
</head>
<body>
 <div>
  <div class="one">50px</div>
  <div class="two">100px</div>
  <div class="three">50px</div>
  <div class="four">50px</div>
 </div>	
</body>
</html>

效果图如下

大盒子有250px的宽度，我们将第二个小盒子设置成100px，那么剩下的3个小盒子就会分剩下的150px空间，每个就是50了。

flex-direction

首先要想使用flex-direction,我们使用的对象就必须是弹性项目，所以我们要在盒子里面加入display:flex; 不然只加flex-direction没有效果，在flex-direction后面加入不同的值，会有不同的效果。

例如我们使用row-reverse来让我们看看代码效果

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	  .one{
	  	 width: 400px;
         height: 400px;
         border: 1px solid black;
         display: flex;
         flex-direction: row-reverse;
         background:red;
	  }
	  .two{
	  	 width:75px;
         height:75px;
         border: 1px solid black;
         background:pink;
	  }
	</style>
</head>
<body>
	<div class="one">
		<div class="two">第一个</div>
		<div class="two">第二个</div>
		<div class="two">第三个</div>
		<div class="two">第四个</div>
	</div>
</body>
</html>

flex-flow

flex-grow与flex-shrink

flex-grow 属性规定在相同的容器中，项目相对于其余弹性项目的增长量。

flex-shrink 属性则是缩小

注释：如果元素不是弹性项目，则 flex 属性无效，和flex-direction一样，那么我们就举flex-grow的例子来看看它们两个的用法

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	  #one{
	  	 width: 400px;
         height: 400px;
         border: 1px solid black;
         display: flex;
         flex-grow
         background:red;
	  }
	  .one{
         border: 1px solid black;
         background:pink;
         flex-grow: 1;
	  }  
	  .two{
         border: 1px solid black;
         background:pink;
         flex-grow: 2;
	  }  
	  .three{
         border: 1px solid black;
         background:pink;
         flex-grow: 1;
	  }  
	  .four{
         border: 1px solid black;
         background:pink;
         flex-grow: 1;
	  }
	</style>
</head>
<body>
	<div id="one">
		<div class="one">第一个</div>
		<div class="two">第二个</div>
		<div class="three">第三个</div>
		<div class="four">第四个</div>
	</div>
</body>
</html>