CSS_弹性盒子模型

最新推荐文章于 2024-06-14 09:42:20 发布

NewBurlaSKing

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量418

点赞数

分类专栏： HTML学习文章标签： css3 前端 html

本文链接：https://blog.csdn.net/qq_55961861/article/details/126249592

版权

HTML学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一.定义

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

CSS3弹性盒内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器弹性容器内包含了一个或多个弹性子元素

注意：

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

默认弹性盒里内容横向摆放

二.弹性盒子属性

父元素(弹性容器)上的属性

display属性

display: flex;：开启弹性盒，属性设置后子元素默认水平排列

flex-direction属性

flex-direction 属性指定了弹性子元素在父容器中的位置

语法
```
flex-direction: row | row-reverse | column | column-reverse
```
- row：横向从左到右排列（左对齐），默认的排列方式
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
- column：纵向排列
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

justify-content属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

语法
```
justify-content: flex-start | flex-end | center
```
- flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
- flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的 main-end边线，而后续弹性项依次平齐摆放
- center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

align-items属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

语法
```
align-items: flex-start | flex-end | center
```
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
- center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

子元素上的属性

flex

根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间默认为0，即如果存在剩余空间，也不放大如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%

三.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            display: flex;   /*开启弹性盒子属性，子元素排列默认为水平*/
            flex-direction: row; /*默认为row 水平摆放*/
            justify-content: center;
            align-items: center;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            flex: 3;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            flex: 1;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>