CSS3 弹性布局 flex

弹性布局精讲

最新推荐文章于 2025-09-02 14:46:35 发布

原创最新推荐文章于 2025-09-02 14:46:35 发布 · 371 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS3 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解了CSS3中的弹性布局，介绍了如何通过display属性设置弹性容器和弹性元素，以及如何利用flex-direction属性调整弹性元素的排列方向，实现响应式设计。

什么是弹性布局？

弹性布局

弹性布局又称弹性盒子，伸缩盒子，是css3中的有一种布局方法，主要用来代替浮动float来完成页面布局；可以使元素具有弹性，可以根据浏览器窗口的大小，进行自适应的放大缩小。

弹性容器：

要使用弹性布局，就必须先将一个元素设置为弹性容器；

我们可以通过 display 来设置弹性容器；display ：flex ；设置为块级弹性容器； display ：inline-flex ；设置为行内弹性容器，这两个的区别是：flex 独占一行，后面的元素将另起一行显示，而 inline-flex 可以和其他元素同占一行。

当一个元素设置 display ：flex ; 后，将自动成为弹性容器，它后面的子元素将成为弹性元素，将自动排成一行；

<style>
    ul {
        width: 1000px;
        border: 5px solid #63d5f1;
        display: flex; /*设置为弹性布局*/
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

我们可以通过给弹性容器设置 flex-direction ：来设置弹性容器中弹性元素的排列方向；

flex-direction : row ; 默认值；弹性元素在弹性容器中水平排列（从左向右）；

flex-direction : row-reverse ; 弹性元素在弹性容器中水平反向排列（从右向左）；

flex-direction : column; 弹性元素在弹性容器中纵向垂直排列（从上向下）；

flex-direction : column-reverse; 弹性元素在弹性容器中反向垂直排列（从下往上）；

弹性元素：

弹性容器的子元素称之为弹性元素，也叫弹性项；一个元素可以同时设置为弹性容器或者弹性元素