flex弹性布局

Smulll_

已于 2023-01-04 18:42:13 修改

阅读量417

点赞数

分类专栏： HTML&CSS 文章标签： css css3 html

于 2022-12-31 10:58:29 首次发布

本文链接：https://blog.csdn.net/weixin_74155781/article/details/128503081

版权

HTML&CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

flex弹性布局

一、flex布局的基础
二、flex的相关容器属性
三、flex的相关项目属性

一、flex布局的基础

1.1、flex的含义

flex布局,也被称之为弹性盒子布局,是CSS3里面新增的一种布局方式,通过使用flex布局,我们可以让布局更加便捷高效.

1.2、如何触发弹性盒子

给父元素添加display属性,并且将取值设置成:flex

1.3、触发弹性盒子有哪些特点

子元素默认横向显示
子元素会默认变成块级元素,能设置宽度高度
如果只有一个子元素的话,则给子元素添加margin:auto的时候会让子元素直接实现水平垂直居中显示

二、flex的相关容器属性

2.1、flex的各个值

在这里插入图片描述

Flex容器:采用Flex布局的元素的父元素;
Flex项目:采用Flex布局容器里面的子元素;
横轴(水平轴):水平方向轴线纵轴(垂直轴):垂直方向轴线
主轴:触发弹性盒子之后,项目的排列方向
侧轴(交叉轴):触发弹性盒子之后,与主轴对立的方向

注意:触发弹性盒子之后,项目默认沿主轴排列。

2.2、修改主轴的方向

flex-direction：

属性：

值	说明
row	主轴在横向，并且以开始位置显示;
row-reverse	主轴在横向，并且以相反方向位置显示;
column	主轴在纵向,并且以开始位置显示;
column-reverse	主轴在纵向，并且以相反方向位置显示.

2.3、调整主轴上的对齐方式

justify-content:

属性：

值	说明
flex-start	主轴的开始位置显示(项目之间是没有间距的);
flex-end	主轴的结束位置显示(项目之间是没有间距的);
center	主轴居中位置显示(项目之间是没有间距的);
space-around	主轴的两端环绕,项目与项目之间距离是首尾项目与容器之间距离的2倍;
space-between	主轴的两端对其;
space-evenly	主轴的间距平分.

2.4、调整侧轴上的对齐方式

align-items:

属性：

值	说明
flex-start	侧轴的开始位置显示;
flex-end	侧轴的结束位置显示;
center	侧轴的居中位置显示;
baseline	侧周的基线位置显示,效果与开始位置一致,实际开发的时候不会使用该属性值;
stretch	默认的拉伸效果,前提,项目不需要设置高度;

2.5、元素折行显示

flex-wrap:

属性：

nowrap：不折行，默认就是存在挤压的效果
wrap：折行显示;

值	说明
nowrap	不折行，默认就是存在挤压的效果;
wrap	折行显示;

2.6、调整在侧轴上显示的行间距

align-content

属性：

值	说明
flex-start	侧轴的开始位置(没有有行间距的);
flex-end	侧轴的结束位置显示(没有行间距的);
center	侧轴的居中位置显示(没有行间距的);
space-between	两端对其;
space-around	两端环绕;
space-evenly	行间距均分

三、flex的相关项目属性

3.1、项目中的单独对齐方式

在这里插入图片描述
项目中的单独对其方式, 可以让不同的元素位于不同的位置显示

父元素触发: display:flex;
单独调整对其方式
需要使用属性: align-self

值	说明
align-self: flex-start	侧轴开始位置;
align-self: flex-end	侧轴的结束位置;
align-self: center	侧轴的居中位置;
align-self: baseline	侧轴的基线位置;
align-self: stretch	侧轴默认拉伸;

3.2、项目显示的顺序

属性:order：

取值：
- 可以为正数
- 可以为负数
取值越大越靠后面
取值越小越靠前面
order:auto

3.3、项目对于空间的显示

主轴在横向的时候
如果项目不设置高度的话,默认高度是拉伸的,项目添加flex:1实现的是占剩余宽度的所有
主轴在纵向的时候
如果项目不设置宽度的话,默认宽度是拉伸的,项目添加flex:1实现的是占剩余高度的所有

属性:flex: 1;
作用:设置占剩余宽度,剩余高度的所有:
前提:
- 主轴在横向则实现占剩余宽度所有;
- 主轴在纵向的话,则实现占剩余高度的所有
- 如果所有的项目都使用了flex:1;则实现的效果是均分的情况

3.4、flex属性

flex属性是一个复合属性是由: flex-grow、flex-shrink、flex-basis三个属性的缩写。
1. flex-grow:定义项目的的放大比例;
  默认为0，即即使存在剩余空间,也不会放大;
  所有项目的flex-grow为1:等分剩余空间(自动放大占位);
  flex-grow为n的项目,占据的空间（放大的比例)是flex-grow为1的n倍。
2. flex-basis: 定义在分配多余空间之前,项目占据的主轴空间(main size)
  浏览器根据此属性计算主轴是否有多余
  空间。相当于设置初始值,默认值为auto
3. flex-shrink:定义项目的缩小比例
  取值为0/1

<!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>
        .bigbox{
                width: 500px;height : 500px;
                border:10px solid gray;margin: 100px auto;
                /*触发弹性盒子*/
                display: flex;
                overflow: auto;
                }
        .bigbox>div{
                    width: 50px;height: 50px;
                    border:2px dashed red;/*不挤压,不折行*/
                    flex-shrink: 0;
                    }
        </style>
</head>
<body>
        <body>
                <div class="bigbox">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>9</div>
                    <div>9</div>
                    <div>9</div>
                    <div>9</div>
                    <div>9</div>
                    <div>9</div>
                </div>
        </body>
</body>
</html>