CSS3之flex属性

最新推荐文章于 2023-02-18 11:00:45 发布

Programmer.杨

最新推荐文章于 2023-02-18 11:00:45 发布

阅读量401

点赞数 1

分类专栏：前端技术-CSS 文章标签： html5 css3

本文链接：https://blog.csdn.net/YWB88888888/article/details/103654411

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

flex属性特点：

要在容器中定义flex属性需要在flex容器上使用display:flex属性
在flex容器内部没有行内、行内块、块级元素的概念，所有元素皆可设置宽高
在flex容器内部拥有主、侧轴（内容排列主方向，辅方向）
主要应用于移动端页面或者不考虑兼容的PC端页面

flex容器属性：

flex-direction:

作用：
         设置flex容器的内容主轴方向
说明：
         如果元素不是弹性盒对象(flex容器)内的元素，则flex-direction属性不起作用
常用值：
         (row)：默认值。主轴为水平（x轴）方向，从左到右
         (row-reverse)：主轴为水平（x轴）方向，从右到左
         (column)：主轴为垂直（y轴）方向，从上到下
         (column-reverse)：主轴为垂直（y轴）方向，从下到上

justify-content:

作用：
         设置在flex容器中主轴方向上的对齐方式
说明：
         如果元素不是弹性盒对象(flex容器)内的元素，则flex-direction属性不起作用
常用值：
         (flex-start)：默认值，从主轴开始方向向主轴结束方向排列
         (flex-end)：从主轴结束方向向主轴开始方向排列（区别于flex-direction：…-reverse属性，不改变盒子的相对位置）
         (space-between)：两端对齐，将剩余空间平均分配，设总空间为l、元素单侧外边距为m、主轴方向上的每一行或列中元素个数为x、每个元素宽度分别为y(1)，y(2)…y(x)，则分配方式公式：l = (x - 1)*2m + (y(1) + … + y(x))
         (space-around)：将空间平均分配，分配方式公式：设总空间为l、元素单侧外边距为m、主轴方向上的每一行或列中元素个数为x、每个元素宽度分别为y(1)，y(2)…y(x)，则分配方式公式：l = 2xm + (y(1) + … + y(x))
         (center)：居中排列

flex-wrap:

作用：
         设置flex容器中元素显示是单行或者多行
说明：
         在css3中flex容器默认单行显示所有子内容（在子内容总宽度大于容器宽度时，按比例缩小子元素宽度），如果元素不是弹性盒对象的元素，则flex-wrap属性不起作用
常用值：
         (nowrap)：默认值，控制所有子元素单行显示
         (wrap)：控制所有子元素在总宽度超出flex容器宽度时换行显示（不会忽略并按比例缩小子元素宽度）
         (wrap-reverse)：控制所有子元素在总宽度超出flex容器宽度时按flex-direction的反方向换行显示（不会忽略并按比例缩小子元素宽度）

align-items:

作用：
         设置flex容器中侧轴方向上的对齐方式 （单行）
常用值：
         (stretch)：默认值，元素被拉伸以适应flex容器（前提是子元素没有高度）
         (flex-start)：默认值，从左向右排列
         (flex-end)：从右向左排列（区别于flex-direction：…-reverse属性，不改变盒子的相对位置）
         (center)：居中排列

align-content:

作用：
         设置flex容器中侧轴方向上的对齐方式 （多行）
常用值：
         (stretch)：默认值，元素被拉伸以适应flex容器（前提是子元素没有高度）
         (flex-start)：从从主轴开始方向向主轴结束方向排列
         (flex-end)：从从主轴结束方向向主轴开始方向排列（区别于flex-direction：…-reverse属性，不改变盒子的相对位置）
         (space-between)：两端对齐，将剩余空间平均分配，设总空间为l、元素单侧外边距为m、主轴方向上的每一行或列中元素个数为x、每个元素宽度分别为y(1)，y(2)…y(x)，则分配方式公式：l = (x - 1)*2m + (y(1) + … + y(x))
         (space-around)：将空间平均分配，分配方式公式：设总空间为l、元素单侧外边距为m、主轴方向上的每一行或列中元素个数为x、每个元素宽度分别为y(1)，y(2)…y(x)，则分配方式公式：l = 2xm + (y(1) + … + y(x))
         (center)：居中排列

flex-flow:

作用：
         该属性是flex-direction和flex-wrap属性的复合属性
说明：
         如果元素不是弹性盒对象的元素，则flex-flow属性不起作用
常用值：
         (VALUE)：flex-direction中的属性
         (VALUE)：flex-wrap中的属性

flex子元素属性：

flex:

作用：
         设置flex容器的子元素如何分配空间，定义该属性css3会自动计算该行或列中所有元素的该属性值总和，然后在按各自值进行分配
说明：
         给不具有指定宽度的子元素分配，有宽度的不变，当总宽度改变时，这些子元素按比例缩放
常用值：
         (NUMBER)：分配份数或宽度百分比

align-self:

作用：
         设置子元素单独在侧轴方向上的对齐方式
说明：
         align-self属性可覆盖flex容器的align-items属性
常用值：
         (stretch)：默认值，元素被拉伸以适应flex容器（前提是子元素没有高度）
         (flex-start)：默认值，从左向右排列
         (flex-end)：从右向左排列（区别于flex-direction：…-reverse属性，不改变盒子的相对位置）
         (center)：居中排列

order:

作用：
         设置flex容器的子元素出现的顺序
说明：
         该值在该元素所在行中相对越小，该元素的位置越靠近主轴开始方向，其他元素依次后移，如果元素不是弹性盒对象的元素，则order属性不起作用
常用值：
         (NUMBER)：默认值是0

代码示例1：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>CSS3之flex属性</title>
    <style type="text/css">
        div {
            width: 100%;
            max-width: 900px;
            height: 480px;
            margin: 0 auto;
            background-color: skyblue;
            
            /*使用flex属性需要在flex容器上使用display:flex属性*/
            display: flex;
            
            /*设置flex容器的内容主轴方向*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            
            
            /*设置在flex容器中主轴方向上的对齐方式*/
            justify-content: flex-start;
            /*justify-content: flex-end;*/
            /*justify-content: space-between;*/
            /*justify-content: space-around;*/
            /*justify-content: center;*/
            
            /*设置flex容器中元素显示是单行或者多行*/
            flex-wrap: wrap;
            /*flex-wrap: nowrap;*/
            /*flex-wrap: wrap-reverse;*/
            
            /*设置flex容器中侧轴方向上的对齐方式（单行）*/
            align-items: stretch;
            /*align-items: flex-start;*/
            /*align-items: flex-end;*/
            /*align-items: center;*/
            
            /*设置flex容器中侧轴方向上的对齐方式（多行）*/
            align-content: stretch;
            /*align-content: flex-start;*/
            /*align-content: flex-end;*/
            /*align-content: space-between;*/
            /*align-content: space-around;*/
            /*align-content: center;*/
        }
        
        div span {
            width: 200px;
            height: 100px;
            background-color: limegreen;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
    </div>
    <hr>
    <div class="div2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

代码示例2：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>CSS3之flex属性</title>
    <style type="text/css">
        div {
            width: 100%;
            max-width: 900px;
            height: 480px;
            margin: 0 auto;
            background-color: skyblue;
            
            /*使用flex属性需要在flex容器上使用display:flex属性*/
            display: flex;
            /*设置flex容器的内容主轴方向*/
            flex-direction: row;
            /*设置在flex容器中主轴方向上的对齐方式*/
            justify-content: space-between;
            /*设置flex容器中元素显示是单行或者多行*/
            flex-wrap: nowrap;
            /*设置flex容器中侧轴方向上的对齐方式（单行）*/
            align-items: stretch;
            /*设置flex容器中侧轴方向上的对齐方式（多行）*/
            align-content: stretch;
        }
        
        .div1 span:first-child {
            background-color: red;
            /*设置子元素对flex空间的分配方式*/
            flex: 2;
        }
        .div1 span:nth-child(2) {
            background-color: orange;
            /*设置子元素单独在侧轴方向上的对齐方式*/
            align-self: flex-end;
        }
        .div1 span:nth-child(3) {
            background-color: yellow;
        }
        .div1 span:last-child {
            background-color: limegreen;
            /*设置flex容器的子元素出现的顺序*/
            order: -1;
        }
        .div1 span {
            height: 100px;
            /*设置子元素对flex空间的分配方式*/
            flex: 1;
        }

        .div2 span:first-child {
            background-color: red;
        }
        .div2 span:nth-child(2) {
            background-color: orange;
            /*设置子元素对flex空间的分配方式*/
            margin: 0 3%;
            flex: 1;
        }
        /*.div2 span:nth-child(3) {
            background-color: yellow;
            !*设置子元素对flex空间的分配方式*!
            flex: 1;
        }*/
        .div2 span:last-child {
            background-color: limegreen;
        }
        .div2 span:first-child,
        .div2 span:last-child {
            width: 100px;
        }
        .div2 span {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <hr>
    <div class="div2">
        <span>1</span>
        <span>2</span>
        <!--<span>3</span>-->
        <span>4</span>
    </div>
</body>
</html>

Programmer.杨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3之flex属性

flex属性特点：要在容器中定义flex属性需要在flex容器上使用display:flex属性在flex容器内部没有行内、行内块、块级元素的概念，所有元素皆可设置宽高在flex容器内部拥有主、侧轴（内容排列主方向，辅方向）主要应用于移动端页面或者不考虑兼容的PC端页面  flex容器属性：flex-direction:作用：  &n...
复制链接

扫一扫