请检查,另外设置flex布局时属性值flex和inline-flex根据什么选择

请检查,另外设置flex布局时属性值flex和inline-flex根据什么选择

<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    ul {

        list-style: none;

        background-color: orange;

        margin: 0;

        padding: 0;

        height: 150px;

        width: 390px;

        /*此处补充代码*/

        display:flex;

        flex-wrap:wrap;

        align-content:space-around;

        justify-content:space-between;

    }

    

    li {

        font-size: 24px;

        width: 100px;

        background-color: pink;

    }

    </style>

</head>


<body>

    <ul>

        <li>第一个li</li>

        <li>第二个li</li>

        <li>第三个li</li>

        <li>第四个li</li>

        <li>第五个li</li>

        <li>第六个li</li>

    </ul>

</body>


</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,代码实现正确。另外,flex就类似于一个块元素,inline-flex类似于一个行内块元素。例如如下,一个灰色盒子,里面有4个子项目(子元素):

灰色盒子设置flex ,在不设置宽度时,默认占据全部空间。

http://img1.sycdn.imooc.com//climg/5e9bf4f109dfb8fb08980164.jpg

但是灰色盒子设置inline-flex,灰色盒子的空间默认是由子项目撑开的。

http://img1.sycdn.imooc.com//climg/5e9bf51f091192eb08830144.jpg

所以一个弹性布局盒子,如果占据整个空间,子项目根据弹性盒子的空间自动分配时,则使用flex布局。如果弹性盒子的宽度是根据里面的内容自适应时,则使用inline-flex。当然了,如果两者能够实现相同的效果,使用哪一个都行。一般情况下,使用flex比较多哦。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师