flex布局

取上方可得中

已于 2023-03-22 22:10:46 修改

阅读量368

点赞数

文章标签： css css3 html

于 2023-03-22 22:06:31 首次发布

本文链接：https://blog.csdn.net/qq_63075179/article/details/129717081

版权

为什么要学习flex布局?传统布局和flex布局区别

简述:

传统布局优点:兼容性强，基本上所有浏览器都适应

传统布局缺点:布局繁琐，在移动端不能很好的布局

flex布局优点:操作方便，布局极为简单，在移动端应用广泛

flex布局缺点:PC端支持性较差。IE11部分支持和低版本不支持

flex布局优势:行内元素也可以使用flex布局，用flex布局后，不区分行内元素(inline)和块级元素(block),且使用flex布局后，flex布局的元素会自适应页面(随着页面大小改变而改变)

使用flex进行布局后，父级称为flex容器，简称容器，父级的所有子元素自动成为容器成员，称为flex项目，简称项目

flex布局原理:通过给父盒子添加flex属性来控制子盒子的位置和排序方式

flex布局父项常用属性
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

(1) flex-direction设置主轴方向

row;(默认值)从左往右

row-reverse;从右往左

column;从上到下

column-reverse;从下到上

flex-direction代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>flex-direction</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            /* 设置为flex布局 */
            display: flex;
            /* 设置主轴方向 */
            flex-direction:row-reverse;
            width: 700px;
            height: 240px;
            border:1px solid red;
        }
        #box>span{
            width: 120px;
            height: 100px;
            margin-left: 20px;
            margin-right: 20px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <span id="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </span>
</body>
</html>

注:如果设置主轴为x轴那默认侧轴为y轴

(2)justify-content设置主轴元素上排序方式

1.flex-start;(默认)从左往右

2.flex-end;从右往左

3.center;居中

4.space-around;平分剩余空间（平分后剩余）

5.space-between;先贴两边再平分剩余空间

代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>flex-direction</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            /* 设置为flex布局 */
            display: flex;
            /* 设置主轴方向 */
            flex-direction:row;
            /* 设置主轴排序方式 */
            justify-content:space-between;
            width: 700px;
            height: 240px;
            border:1px solid red;
        }
        #box>span{
            width: 120px;
            height: 100px;
            margin-left: 20px;
            margin-right: 20px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <span id="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </span>
</body>
</html>

注:设置主轴方向和设置排序方式是不一样的

主轴排序从右到左:flex-direction:row-reverse