• 技术文章 >Web开发 >css教程

    css Flexbox布局的介绍

    小妮浅浅小妮浅浅2021-07-27 09:27:46原创3518

    概念

    1、Flexbox是flexiblebox的简称(注:灵活的箱容器),是CSS3引进的新布局模式。

    2、决定了要素如何在页面上排列,可以在不同的画面尺寸和设备下预测地表现出来。

    特点

    (1)在不同的方向上排列元素。

    (2)重新排列元素的显示顺序。

    (3)改变元素对齐方式。

    (4)动态地将元素装入容器中。

    开启布局实例

    如果要开启容器的 flex 布局,只需要在 css 里边给.flex 设置display: flex属性,给它加上了 100px 的高度:

    display: flex;
    height: 100px;

    以上就是css Flexbox布局的介绍,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css flexbox
    品易云
    上一篇:css Flex容器如何理解 下一篇:css Flex容器属性有哪些

    相关文章推荐

    • css中删除input输入框的阴影• css中margin是什么?怎么设置?• css3中设置元素宽度的方法• CSS鼠标跟随的原理• css中svg图片无法显示怎么办?• css点击元素变更颜色的方法• css如何使用scale()方法进行缩放• css line-height属性是什么• css设置行间距的三种方法• CSS中有哪些定位的方式• css中Min()函数如何使用• css max函数调整字体• css clamp()函数是什么• css设置行间距的方法• css外边距margin是什么• css padding内边距的理解• css中Grid模块是什么• css Flex容器如何理解

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网