Flex布局详解

最新推荐文章于 2024-02-12 22:19:08 发布

segegefe

最新推荐文章于 2024-02-12 22:19:08 发布

阅读量2.1k

点赞数

分类专栏：前端 html 文章标签： npm node.js 前端

本文链接：https://blog.csdn.net/segegefe/article/details/123252948

版权

Flex 布局详解

一、入门

1. flex 是什么？

flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

2. 为什么我们需要 flex

解决元素居中问题
自动弹性伸缩，合适适配不同大小的屏幕，和移动端

3.flex 常见术语三个2

序号

简记

术语

二成员

容器和项目(container / item)

二根轴

主轴与交叉轴(main-axis / cross-axis)

二根线

起始线(main/cross-start)与结束线（main/cross-end)

二、容器 container 的属性

外面的大容器的属性的设置

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

1.flex-direction 主轴方向

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
}
.container{
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

2. flex-wrap 主轴一行满了换行

nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
    display: flex;
    h

最低0.47元/天解锁文章

segegefe

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Flex布局详解

Flex 布局详解一、入门1. flex 是什么？flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思2. 为什么我们需要 flex解决元素居中问题自动弹性伸缩，合适适配不同大小的屏幕，和移动端3.flex 常见术语三个2序号简记术语1二成员容器和项目(container / item)2二根轴主轴与交叉轴(main-axis / cross-axis)3二根线起始线(main/cross-start)与结束线（main/cross-
复制链接

扫一扫