• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

flex布局

互联网 diligentman 2周前 (04-08) 6次浏览

文章目录

  • 前言
  • 一、flex布局体验
  • 二、flex布局原理
  • 三、flex布局父项常见属性
    • 1.flex-direction设置主轴的方向
    • 2.justify-content主轴上子元素排列方式
    • 3.flex-wrap设置子元素是否换行
    • 4.align-items侧轴上的子元素排列方式(单行)
    • 5.align-content侧轴子元素排列方式(多行)
    • 6.flex-flow复合属性
  • 四、flex布局子项常见属性
    • 1.flex属性
    • 2.align-self属性
    • 3.order属性
  • 总结

前言

这部分学习flex布局,还是通过写一个移动端网页进行练习,这里就只记录理论知识啦。


提示:以下是本篇文章正文内容,下面案例可供参考

一、flex布局体验

传统布局:
(1)兼容性好
(2)布局繁琐
(3)局限性,不能在移动端很好的布局
flex布局:
(1)操作方便,布局极为简单,移动端应用广泛
(2)pc端浏览器支持情况较差
(3)IE11或更低版本,不支持或仅部分支持
建议:
(1)pc端页面使用传统布局
(2)移动端或者是不考虑兼容性问题的pc端,使用flex弹性布局
代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            display: flex;
            width: 800px;
            height: 200px;
            background-color: pink;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

二、flex布局原理

采用flex布局元素,成为flex容器,简称容器。他的所有子元素自动称为容器成员,成为flex项目,简称项目。
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。

三、flex布局父项常见属性

1.flex-direction设置主轴的方向

flex布局
默认主轴方向就是x轴方向,水平向右;侧轴方向就是y轴方向,垂直向下。
注意:主轴和侧轴是会发生变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。子元素是跟着主轴来排列的。
flex布局

代码如下(示例):

/* 默认主轴方向从左往右 */
flex-direction: row; 
/* 主轴方向从右往左 */
flex-direction: row-reverse;
/* 主轴方向从上往下 */
flex-direction: column; 
/* 主轴方向从下往上 */
flex-direction: column-reverse;

2.justify-content主轴上子元素排列方式

flex布局
代码如下(示例):

/* 从主轴开始位置对齐  */
justify-content: flex-start; 
/* 从主轴结束位置对齐 */
justify-content: flex-end;
/* 位于主轴居中对齐 */
justify-content: center;
/* 平分主轴剩余空间 */
justify-content: space-around;
/* 两边贴边对齐,剩余子项目平分剩余空间 */
justify-content: space-between;

3.flex-wrap设置子元素是否换行

flex布局

代码如下(示例):

/* 默认不换行 */
flex-wrap: nowrap;
/* 换行进行显示 */
flex-wrap: wrap;

4.align-items侧轴上的子元素排列方式(单行)

flex布局

代码如下(示例):

/* 默认侧轴上从上往下排列 */
align-items: flex-start;
/* 从下往上加载 */
align-items: flex-end;
/* 居中加载 */
align-items: center;
/* 拉伸 */
align-items: stretch;

5.align-content侧轴子元素排列方式(多行)

flex布局

代码如下(示例):

/* 侧轴整体位于开始位置 */
align-content: flex-start;
/* 侧轴整体位于结束位置 */
align-content: flex-end;
/* 侧轴位于居中位置 */
align-content: center;
/* 侧轴拉伸 */
align-content: stretch;
/* 平均分布 */
align-content: space-around;
/* 上下对齐,剩余空间给剩下的子项目平局分布 */
align-content: space-between;

总结:
align-items属性只适合单行,只有上对齐,下对齐,居中和拉伸;
align-content属性适合多行,有上对齐,下对齐,居中,拉伸以及平均分配剩余空间的属性值。
flex布局

6.flex-flow复合属性

代码如下(示例):

/* flex-direction: row; */
/* 换行进行显示 */
/* flex-wrap: wrap;  */
flex-flow: row wrap;

四、flex布局子项常见属性

1.flex属性

子项目分配父盒子的剩余空间,属性值为数字,1代表占总分中的一份,默认值为0。
代码如下(示例):

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        section {
            display: flex;
            width: 80%;
            height: 80px;
            margin: 10px auto;
            background-color: pink;
        }
        section div:nth-child(1),section div:nth-child(3) {
            width: 80px;
            height: 80px;
            background-color: purple;
        }
        section div:nth-child(2) {
            flex: 1;
            height: 80px;
            background-color: salmon;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

效果展示:
flex布局

2.align-self属性

允许单个子项目有与其他子项目不同的对齐方式。默认值为auto,表示继承父元素的align-items,如果没有父元素等同于stretch。
代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            display: flex;
            width: 800px;
            height: 500px;
            background-color: pink;
            /* 默认主轴方向从左往右 */
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: rebeccapurple;
        }
        div span:nth-child(2) {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果展示
flex布局

3.order属性

定义项目在加载时,有自己的先后顺序。属性值为数值,数字越小越靠前,默认值为0

代码如下(示例):

div span:nth-child(2) {
    /* 往前面调,属性值要小于零 */
    /* order: -1; */
    /* 往后调顺序 */
    order: 2;
}

效果展示
flex布局
flex布局


总结

流式布局就学习到这里啦,自己做一个项目来进行练习,这里就不展示了。每天坚持学习前端。
flex布局


程序员灯塔
转载请注明原文链接:flex布局
喜欢 (0)