来一起复习一下Flex布局吧！

最新推荐文章于 2024-05-05 19:46:18 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-05-05 19:46:18 发布

阅读量262

点赞数

分类专栏： CSS 文章标签： css flex 布局

本文链接：https://blog.csdn.net/tuzi007a/article/details/113063511

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

大家好，我是梅巴哥er。本篇专门复习一下Flex布局的相关知识。

参考学习网站：

菜鸟教程：Flex布局
阮一峰老师的总结：Flex布局

什么是Flex布局

flex布局，也就是弹性布局，是W3C在2009年提出的一种新的布局形式。

Flex布局的特点

灵活度高
布局简单
弹性盒子

为啥要用Flex布局

传统的布局方式，是通过 display + position + float来完成的。这种形式在某些特殊布局中不是很方面，比如垂直居中。
flex布局具有很高的灵活性，完成这种布局，就非常方便。

怎么用Flex布局

任何一个盒子都可以指定位flex布局。
块级盒子： .box { display: flex; }
行内元素： .box { display: inline-flex;}
注意，盒子设为flex布局后，子元素的float, clear和vertical-aline就失效了。
设置位flex布局的盒子，就叫容器。容器内的子元素，都叫项目(item)。
容器有两根轴线，左向右的横轴和上至下的竖轴。项目默认沿着横轴排列。

Flex布局的属性

容器的6大属性，这些都是写在容器上的

1，flex-direction：项目的排列方向。有4个值。
- row: → （默认）
- row-reverse: ←
- column: ↓
- column-reverse: ↑
2，flex-wrap：表示项目在一条轴线上排不下，如何换行。
- nowrap: 不换行（默认）。这样会压缩项目的尺寸，强行让项目都排在一行。
- wrap: 换行。第一行排不下，就会排去下面一行。
- wrap-reverse: 换行。但是项目先排容器的最下面，下面排满了，再往上面一行排。
3，flex-flow：把项目排列方向和是否换行这俩属性放在了一起。
- 例如： flex-flow: row nowrap;
4，justify-content：表示项目在横轴上的对齐方式。5个值。
- flex-start：左对齐
- flex-end: 右对齐
- center: 居中
- space-between:左右两端对齐，项目之间的间隔都相等
- space-around: 每个项目两侧的间隔相等。
5，align-items：项目在竖轴上的对齐。5个值
- flex-start: 上对齐
- flex-end: 下对齐
- center: 居中（垂直方向的居中）
- baseline: 项目的第一行文字的基线对齐
- stretch: 默认值。项目被拉伸。如果项目不设置高度，则在高度上顶满容器。
6，align-content：项目对齐方式。但是容器内必须有多行的项目，该属性才有效。6个值。
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch（默认值）

项目的6个属性。这些属性是写在item上的

1，order: 表示项目的排列顺序。值是数字。默认为0。
2, flex-grow: 表示项目的放大比例，默认为0，即不放大。
- 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
- 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3, flex-shrink:表示项目的缩小比例，默认为1，即空间不足就缩小。
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
- 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
4, flex-basis: 设置项目的初始宽度。
- 值是数字或px长度或auto
5, flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6, align-self: 表示单独设置该项目的对齐方式，可覆盖align-items属性。
- 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- flex-start
- flex-end
- center
- baseline
- stretch

测试一下：垂直居中是否简单了？

子盒子及子盒子里的内容都居中

完整代码：子盒子及子盒子里的内容都居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
        }
        .box1 {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">hello</div>
    </div>
</body>
</html>