css3之flex布局

最新推荐文章于 2024-06-07 17:39:43 发布

步入飞花

最新推荐文章于 2024-06-07 17:39:43 发布

阅读量959

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_42646178/article/details/119415724

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

flex布局

默认的文档流块子元素会从上到下排列，使用flex布局后子元素们会在水平方向上，从左至右排列
flex 布局的优势

flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。
flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。

声明： 使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。
备注：一般是用 display:flex这个属性。display:inline-flex用得较少。
默认文档流的排列

    <style>
        .box1, .box2, .box3, .box4 {
            width: 100px;
            height: 100px;
            border: 1px solid rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>

在这里插入图片描述
父元素声明容器为弹性布局后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            display: flex;
        }
        .box1, .box2, .box3, .box4 {
            width: 100px;
            height: 100px;
            border: 1px solid rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

在这里插入图片描述

1.flex-direction 属性

flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：

属性值	描述
row	从左到右水平排列子元素（默认值）
column	从上到下垂直排列子元素
row-reverse	从右向左排列子元素
column-reverse	从下到上垂直排列子元素

上图的例子我们加一行代码

 /* 从上到下排列 */
 flex-direction: column;

在这里插入图片描述

2.flex-wrap 属性

flex-wrap：控制子元素溢出时的换行处理。

3.justify-content 属性

需要了解主轴和侧轴（交叉轴）的概念：

justify-content：控制子元素在主轴上的排列方式。
justify-content: flex-start; 设置子元素在主轴上的对齐方式。属性值可以是：

flex-start 从主轴的起点对齐（默认值）
flex-end 从主轴的终点对齐
center 居中对齐
space-around 在父盒子里平分
space-between 两端对齐平分

/* 居中对齐 */
justify-content: center;

在这里插入图片描述

/* 在父盒子里平分 */
justify-content: space-around;

在这里插入图片描述

4.align-items 属性

align-items：设置子元素在侧轴上的对齐方式。属性值可以是：
- flex-start 从侧轴开始的方向对齐
- flex-end 从侧轴结束的方向对齐
- baseline 基线默认同flex-start
- center 中间对齐
- stretch 拉伸

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style:none;
        }
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";

        }
        section{
            width: 1000px;
            margin:50px auto;
        }
        section h3{
            font-size:22px;
            font-weight: normal;
        }

        ul{
            border: 1px solid #999;
            background-color: #fff;
            display: flex;
            height:500px;

        }

        ul li{
            width: 200px;
            height: 200px;
            background: pink;
            margin:10px;

        }

        section:nth-child(1) ul{
            /* 侧轴对齐方式 ：从侧轴开始的方向对齐*/
            align-items:flex-start;
        }

        section:nth-child(2) ul{
            /* 侧轴对齐方式 ：从侧轴结束的方向对齐*/
            align-items:flex-end;
        }

        section:nth-child(3) ul{
            /* 侧轴对齐方式 ：居中*/
            align-items:center;
        }

        section:nth-child(4) ul{
            /* 侧轴对齐方式 ：基线 默认同flex-start*/
            align-items:baseline;
        }

        section:nth-child(5) ul{
            /* 侧轴对齐方式 ：拉伸*/
            align-items:stretch;

        }

        section:nth-child(5) ul li{
            height:auto;
        }


    </style>
</head>
<body>
<section>
    <h3>侧轴的对齐方式:align-items ：flex-start</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>侧轴的对齐方式：align-items:flex-end</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>侧轴的对齐方式：align-items:center</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>侧轴的对齐方式：align-itmes:baseline</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>侧轴的对齐方式：align-itmes: stretch</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
</body>
</html>

在这里插入图片描述

注意：通过设置align-itmes:center 和 justify-content: center达到水平垂直居中的效果

5.flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
在这里插入图片描述
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

6.flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

7.flex属性：设置子盒子的权重

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

8.order属性

order定义自身排列顺序。数值越小，越靠前，默认为0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            display: flex;
        }
        .box1, .box2, .box3, .box4 {
            width: 100px;
            height: 100px;
            border: 1px solid rgba(0, 0, 0, 0.3);
        }
        .box4 {
            order: -1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
    </div>
</body>
</html>

在这里插入图片描述

9.flex-grow属性（num）

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            display: flex;
        }
        .box1, .box2, .box3, .box4 {
            width: 100px;
            height: 100px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            flex-grow: 1;
        }
        .box4 {
            order: -1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
    </div>
</body>
</html>

在这里插入图片描述

步入飞花

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3之flex布局

flex布局默认的文档流块子元素会从上到下排列，使用flex布局后子元素们会在水平方向上，从左至右排列flex 布局的优势flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex
复制链接

扫一扫

专栏目录