flex布局详情介绍

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

扛狼1427

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

阅读量228

点赞数

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

本文链接：https://blog.csdn.net/weixin_42661283/article/details/96308798

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

设为flex布局（display：flex）以后，子元素的float、clear、vertical-align属性将无效

任何的属性值加上 -reverse ：表示颠倒顺序

webkit内核的浏览器需要加上 -webkit-前缀

父级元素盒子属性

排列方向顺序： flex-direction

1.flex-direction: row; 默认子元素在父元素上从左向右排列（若不换行，超出元素本身的宽度则平分宽度）

2.flex-direction:row-reverse; 取反，子元素在父元素上从右向左排列

3.flex-direction:column; 子元素在父元素从上到下排列

4.flex-direction:column-reverse; 子元素在父元素从下到上排列

换不换行？ flex-wrap

1.flex-wrap:nowrap; 默认不换行

2.flex-wrap:wrap; 正常换行

3.flex-wrap:wrap-reverse; 子元素在父元素从下左方向往右上方向换行

排列和换行的简写方式： flex-flow

flex-flow: row nowrap; 默认值，从左向右排列，不换行

在主轴（X轴）中的对齐方式： justify-content ，假设排列方向从左到右

1.justify-content:flex-start; 默认左对齐（起始位置对齐）

2.justify-content:flex-end; 右对齐（末尾位置对齐）

3.justify-content:center; X轴居中对齐

4.justify-content:space-between; 两端对齐，子元素与子元素之间间隔都相等

5.justify-content:space-around; 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

在交叉轴（Y轴）的对齐方式：align-items，假设排列方向从上到下

1.align-items:flex-start; 默认顶部对齐（起始位置对齐）

2.align-items:flex-end; 底部对齐（末尾位置对齐）

3.align-items:center; Y轴居中对齐

4.align-items:stretch; 默认值，若子元素没有设置高度或设为auto ，则子元素将填满父元素

定义多个子元素的对齐方式，若只有一个子元素，则没有效果： align-content

1.align-content:flex-start; 交叉轴（Y轴）的起点对齐

2.align-content:flex-end; 在可换行的情况下，交叉轴（Y轴）的终点对齐

3.align-content:center; 在可换行的情况下，交叉轴（Y轴）居中对齐

4.align-content:stretch; 默认值，若子元素没有设置高度或设为auto，则子元素将填满父元素

5.align-content:space-between; 交叉轴（Y轴）两端对齐

6.align-content:space-around; 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

子级元素属性

设置子元素的先后顺序：order

order: -1; 子元素的排列顺序，数值越小，排名越靠前，默认值为0

子元素的放大比例

flex-grow:2; 有剩余空间的情况下，子元素的放大比例，默认为0

子元素的缩小比例

flex-shrink:3; 无剩余空间的情况下，子元素的缩小比例，默认值为1；如果有一个或以上子元素为0，其他子元素为1，则前者不会被缩小

设置子元素的空间大小

flex-basis: 350px | auto; 在子元素还没有被分配多余的空间之前，设置子元素的空间大小，默认值auto

放大比例、缩小比例、空间大小的缩写：flex

flex： 0 1 auto; 简写属性，后两个属性可选

快捷键： flex：auto（1 1 auto） flex：none（0 0 auto）

允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性： align-self

1.align-self:flex-start; 子元素在交叉轴（Y轴）的起点位置对齐

2.align-self:flex-end; 子元素在交叉轴（Y轴）的终点位置对齐

3.align-self:center; 子元素在交叉轴（Y轴）的居中位置对齐

4.align-self:baseline; 子元素在交叉轴（Y轴）的基线位置对齐

5.align-self:stretch; 子元素等同于父元素，不做任何处理

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        /* 设为flex布局以后，子元素的float、clear 和 vertical-align 属性将无效 */
        /* 任何的属性值加上-reverse : 颠倒顺序 */
        .box{
            height: 800px;
            background-color:red;
            display: -webkit-flex;
            display: flex;

            /* 排列方向顺序: flex-direction  */
            /* flex-direction:row;  flex布局默认子元素在父元素上从左向右排列，坚决不换行，超出平分  */
            /* flex-direction:row-reverse; 子元素在父元素上从右向左排列 */
            /* flex-direction:column; 子元素在父元素上从上往下排列 */
            /* flex-direction:column-reverse; 子元素在父元素上从下往上排列 */


            /* 换不换行? : flex-wrap */
            /* flex-wrap: nowrap; 默认不换行 */
            /* flex-wrap:wrap; 正常换行 */
            /* flex-wrap:wrap-reverse;  子元素在父元素上从下左方向往右上方向换行 */


            /* flex-direction 和 flex-wrap 的简写模式: flex-flow */
            /* flex-flow: row nowrap; 默认值,值为 direction 和 wrap 的值*/
            /* flex-flow: row wrap; 默认排列顺序 换行 */


            /* 在主轴（X轴）中的对齐方式 : justify-content ,假设主轴(X轴)的对齐方式为从左到右 */
            /* justify-content: flex-start; 默认左对齐(起始位置对齐) */
            /* justify-content: flex-end; 右对齐(末尾位置对齐) */
            /* justify-content: center;  居中对齐 */
            /* justify-content: space-between; 两端对齐，子元素与子元素之间间隔都相等 */
            /* justify-content: space-around; 子元素两侧的间隔都相等 */


            /* 在交叉轴（Y轴）中的对齐方式 : align-items ,假设交叉轴（Y轴）的对齐方式为从上到下*/
            /* align-items: flex-start;  默认顶部对齐(起始位置对齐) */
            /* align-items: flex-end; 底部对齐(末尾位置对齐) */
            /* align-items: center;  Y轴居中*/
            /* align-items: stretch; 默认值，若子元素没有设置高度或设为auto，则子元素将填满父元素 */


            /* 定义多个子元素的对齐方式,如果只有一个子元素,则没有效果 align-content */
            /* align-content: flex-start;  交叉轴(Y轴)的起点对齐 */
            /* align-content: flex-end; 在可换行的情况下，交叉轴(Y轴)的终点对齐 */
            /* align-content: center;  在可换行的情况下，交叉轴(Y轴)居中对齐*/
            /* align-content: stretch; 默认值，若子元素没有设置高度或设为auto，则子元素将填满父元素 */
            /* align-content: space-around; 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 */
            /* align-content: space-between;  交叉轴 两端对齐*/
        }

        .item1{
            order: -1;  /*  子元素的排列顺序，数值越小，排名越靠前,默认值为0 */
            /* flex-grow: 2; 有剩余空间的情况下，子元素的放大比例,默认为0 */
            /* flex-shrink: 3;  无剩余空间的情况下，子元素的缩小比例,默认为1;如果一个子元素为0,其他子元素为1，则前者不会被缩小 */
            /* flex-basis: 350px; 在子元素还没有被分配多余空间之前，设置子元素的空间大小，默认值auto */
            /* flex: 0 1 auto; flex-grow flex-shrink flex-basis 的简写，后两个属性可选
                两个快捷键 ： flex:auto (1 1 auto)
                             flex:none (0 0 auto)
             */

             /* 允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性。
             默认值为auto，表示继承父元素的align-items属性 */
            /* align-self: flex-start;  子元素在交叉轴的起点位置对齐 */
            /* align-self: flex-end;  子元素在交叉轴的终点位置对齐*/
            /* align-self: center;  子元素在交叉轴的居中位置对齐*/
            /* align-self: baseline;  子元素在交叉轴的基线位置对齐*/
            /* align-self: stretch; 子元素等同于父元素,不做任何特殊处理*/
        }

        #dv{
            /* height: 200px; */
            width: 200px;
            background-color: yellow;
            border:1px dashed #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="dv" class="item">1</div>
        <div id="dv" class="item1">2</div>
        <div id="dv" class="item">3</div>
        <div id="dv" class="item">4</div>
        <div id="dv" class="item">5</div>
        <div id="dv" class="item1">6</div>
        <div id="dv" class="item">7</div>
        <div id="dv" class="item">8</div>
        <div id="dv" class="item">9</div>
        <div id="dv" class="item">10</div>
    </div>
</body>
</html>