css弹性盒模型详解----子元素的屬性

最新推荐文章于 2024-02-28 14:48:26 发布

旧城空巷旧心

最新推荐文章于 2024-02-28 14:48:26 发布

阅读量847

点赞数 1

分类专栏： css 文章标签：弹性盒模型 display：flex css3

本文链接：https://blog.csdn.net/qq_34451947/article/details/103076084

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本篇文章介绍弹性盒模型子元素的基本属性

前言 父元素的6种属性介绍了五种，最后一张align-content  就不介绍了 属性的效果用其它的基本都能实现 初学者以
后有兴趣可以自行研究

弹性盒模型谢了display：flex 就可以当做是弹性盒子但是弹性盒子下面的子元素有很多时候受父元素的影响所展现的不是特别符合自己的要求，还有当自己需要跟多而弹性盒子做不到的时候子元素往往能进行弥补，下面来介绍下子元素的属性

//第一条属性 flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
加了flex-grow的属性0是不放大 1是放大 若是一行只有一个元素则百分百 若一行有两个元素 一个写了grow：1 一个没写则写了grow：1 自身的宽度 = 自身+剩余的空间 當然  剩下的空间你也可以随意的分配 比如2:1 等等  
你可以仔细阅读下面的代码就会完全了解

<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <style>
        .flex-wrap {
            width: 1000px;
            height: 500px;
            background-color: #ccc;
            display: flex;
        }

        .box1 {
            height: 200px;
            background-color: red;
            flex-grow: 2;
        }
        .box2{
            height: 200px;
            background-color: blue;
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <div class="flex-wrap">
        <div class="box1">
            1111111111
        </div>
        <div class="box2">
            1111111111
        </div>
    </div>
</body>
</html>

效果演示如下：

		比例2:1

在这里插入图片描述

第二条属性 flex-shrink 指定了 flex 元素的收缩规则。
	flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
	具体解释: 弹性盒顾名思义 盒子具有弹性
		从下面代码可以看出父容器的宽度是1000  子元素一个宽度900 一个200 正常情况下是会溢出
		然而在弹性盒模型里面  子元素的宽度和大于父元素的时候 子元素会等比例的进行宽度收缩
		效果看 shrink1：
			节省大家的看图资源  就只发一张图了  box1的宽度是900 然而效果图显示实际宽度是800+ 这就是进行了盒模型的
			等比例收缩了
			
		然而在很多情况下 我们不想要某个盒子进行收缩的时候 就要用到 flex-shrink这个属性了 他是设置收缩比例的
		默认是1  不收缩是0 代码和效果看shrink2：
			在shrink2代码中可以看到  我们给box2学了 flex-shrink ：0 也就是说盒子二不缩放的时候
			那么在效果2的时候  box1的宽度应该是直接变成了800
			

shrink1	：
<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <style>
        .flex-wrap {
            width: 1000px;
            height: 500px;
            background-color: #ccc;
            display: flex;
        }

        .box1 {
            width: 900px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="flex-wrap">
        <div class="box1">
            1111111111
        </div>
        <div class="box2">
            1111111111
        </div>
    </div>
</body>
</html>
	
shrink2：

<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <style>
        .flex-wrap {
            width: 1000px;
            height: 500px;
            background-color: #ccc;
            display: flex;
        }

        .box1 {
            width: 900px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            flex-shrink: 0;
        }
    </style>
</head>

<body>
    <div class="flex-wrap">
        <div class="box1">
            1111111111
        </div>
        <div class="box2">
            1111111111
        </div>
    </div>
</body>
</html>

效果演示如下：

shrink1：

在这里插入图片描述

shrink2：

在这里插入图片描述

第三种属性: order 用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。
   这个属性应该很好懂了  就直接上官方图片了
   使用的方法是
   order: num

效果演示如下:

在这里插入图片描述

第四种属性：flex-basis 一个长度单位或者一个百分比，规定元素的初始长度。


第五种属性 flex  子元素的flex属性是flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
	要注意 这点哦   不是带有display：flex的的盒子
	flex的值:
		flex-grow	一个数字，规定项目将相对于其他元素进行扩展的量。
		flex-shrink	一个数字，规定项目将相对于其他元素进行收缩的量。
		flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
		auto	与 1 1 auto 相同。
		none	与 0 0 auto 相同。
		initial	设置该属性为它的默认值，即为 0 1 auto。
		inherit	从父元素继承该属性。

第六种属性  align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
	值：
		auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
		stretch	元素被拉伸以适应容器。
		center	元素位于容器的中心。
		flex-start	元素位于容器的开头。
		flex-end	元素位于容器的结尾。
		baseline	元素位于容器的基线上。
		initial	设置该属性为它的默认值。
		inherit	从父元素继承该属性。
	看下图演示:
	flex-start 是父元素的align-items的属性 
	第三个是flex-end 是子元素的align-self属性