css弹性布局flex

css

弹性布局

  • flex布局,弹性布局,代替float,针对div容器

    任何一个容器都可以指定为Flex布局。

    flex布局的使用步骤:

    1、开启flex布局,display:flex; 布局块级元素

    display: inline-flex;布局行内元素

    2、设置主轴方向,默认的主轴是横向,

    flex-direction

    ​ 3、设置侧轴(交叉轴): align-items

注意:行内元素也可以使用Flex布局。以下写法代表将display:inline和display:flex结合起来

css 复制代码
/* 启用弹性布局,并变为行内元素 */
.box{
  display: inline-flex;
}

注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

  • flex-direction属性

    flex-direction属性决定主轴的方向(即项目的排列方向)。

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    

    它可能有4个值。

    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。
  • flex-wrap属性

    默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    css 复制代码
    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

    它可能取三个值。

    (1)nowrap(默认):不换行。

    (2)wrap:换行,第一行在上方。

    (3)wrap-reverse:换行,第一行在下方。

  • justify-content属性

    justify-content属性定义了项目在主轴上的对齐方式。也就是水平对齐。

    它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

    css 复制代码
    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    }
    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    • space-evenly:平均对齐,在CSS3后续才加入的,是平均对齐
  • align-items属性

    align-items属性定义项目在交叉轴上如何对齐。也就是当前行的垂直对齐,分行对齐。

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    

    它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。重点
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  • align-content属性

    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。也就是垂直对齐,不分行对齐。

    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    

    该属性可能取6个值。

    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch(默认值):轴线占满整个交叉轴。

flex-wrap&&align-content案例

html 复制代码
    <style>
        .div1 {
            width: 500px;
            height: 600px;
            border: 1px solid red;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            /* 设置换行 */
             flex-wrap:wrap; /*nowrap:不换行,wrap:换行*/
             justify-content: center;
             /* align-items: center; */
             align-content: center;
        }
        .div1 .div1-1 {
            width: 150px;
            height: 150px;
            background-color: lime;
        }
        .div1 .div1-2 {
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .div1 .div1-3 {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
         
    </style>
</head>
<body>
    
    <div class="div1">
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
    </div>

     
</body>

综合案例:

html 复制代码
    <style>
        .div1 {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            box-sizing: border-box;
            /* 开启flex布局 */
            display: flex;
            /* 设置主轴方向 */
            flex-direction: row; /* row:默认,横向,column:纵向*/
            /* 设置主轴对齐方式 */
            /*
            flex-start:左对齐 ,
            flex-end:右对齐
            center:居中
            space-between:两端对齐
            space-around:两端留白对齐
            space-evenly:等距离留白对齐
            */
            justify-content:space-evenly;
            
            /* 设置侧轴 */
            align-items:center;
        }
        .div1 .div1-1 {
            width: 150px;
            height: 150px;
            background-color: lime;
        }
        .div1 .div1-2 {
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .div1 .div1-3 {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
        .div2 {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            /* 开启flex布局 */
            display: inline-flex;
            /* 设置主轴方向 */
            flex-direction: row;
            /* 设置主轴对齐方式 */
            justify-content: space-evenly;
            /* 设置侧轴 */
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- 讲解flex布局,弹性布局,代替float,针对div容器 -->
    <!-- 
        flex布局的使用步骤: 
        1、开启flex布局,display:flex; 布局块级元素
                display: inline-flex;布局行内元素
        2、设置主轴方向,默认的主轴是横向,
            flex-direction

        3、设置侧轴(交叉轴): align-items


    -->
    <div class="div1">
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
    </div>

    <div class="div2">
        <a href="#">龙哥卷发</a>
        <a href="#">明明看龙哥</a>
        <a href="#">磊哥怎么想</a>
    </div>

</body>

项目的属性

  • order属性

    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

  • flex-grow属性(重点)

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

  • align-self属性

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    
  • align-self属性

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    

综合案例:

html 复制代码
    <style>
        /* div {
            width: 800px;
            height: 200px;
            background-color: antiquewhite;
            display: inline-flex;
            justify-content: space-between;
        }
        div a:nth-child(7) {
            order: -1;
        }
        div a:first-child {
            order: 1;
        } */
        .div1 {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .div1 .div1-1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            flex-grow: 1;
        }
        .div1 .div1-2 {
            width: 100px;
            height: 100px;
            background-color: lime;
            /* 分配剩余空间(大小) */
            flex-grow: 2; /* 把剩余的宽度全部给你*/
            align-self: flex-end;
        }
        .div1 .div1-3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <!-- flex其他属性 -->
    <!-- <div>
        <a href="#">发现音乐</a>
        <a href="#">我的音乐</a>
        <a href="#">关注</a>
        <a href="#">商城</a>
        <a href="#">音乐人</a>
        <a href="#">云推歌</a>
        <a href="#">下载客户端</a>
    </div> -->

    <div class="div1">
        <div class="div1-1"></div>
        <div class="div1-2"></div>
        <div class="div1-3"></div>
    </div>
</body>

 href="#">发现音乐</a>
        <a href="#">我的音乐</a>
        <a href="#">关注</a>
        <a href="#">商城</a>
        <a href="#">音乐人</a>
        <a href="#">云推歌</a>
        <a href="#">下载客户端</a>
    </div> -->

    <div class="div1">
        <div class="div1-1"></div>
        <div class="div1-2"></div>
        <div class="div1-3"></div>
    </div>
</body>
相关推荐
深度混淆3 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China4 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q5 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海6 分钟前
Chrome离线安装包下载
前端·chrome
m512716 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript