Flex布局常用属性和使用方法

原创于 2024-06-13 22:41:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

VUE 专栏收录该内容

5 篇文章

订阅专栏

Flex布局是什么

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

Flex是 CSS3 的一种新的布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

如何设置

任何一个容器都可以指定为Flex布局. 在元素的style中设置 - "display: flex". 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

.box {
  display: flex;
}

.box {
   display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box {
   display: -webkit-flex; /* Safari */  display: flex;
}

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size。

常用的属性

在将元素设置为弹性盒子后, 往往需要配套其他属性一起使用来调整元素位置.

容器的属性

以下6个属性设置在容器上.

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。

flex-wrap

控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-flow

设置或检索弹性盒模型对象的子元素排列方式。

justify-content

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。其他类似名称的属性

justify-items - 用于控制网格容器中的网格项目在其网格单元格中的水平对齐方式.
- 用了感觉没啥用.
justify-self - 属性将覆盖单个项目上的justify-items。默认情况下，它在网格项目上设置并继承justify-items的值。
justify-tracks - 实验性属性

参考文档 - justify-content - CSS: Cascading Style Sheets | MDN

align-items

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

align-content

在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

项目的属性

以下6个属性设置在项目上

flex
order
flex-grow
flex-shrink
flex-basis
align-self

flex

这个属性需要设置在子元素的style中.用来设置Flex 项目(flex item)在Flex 容器(flex container)的主轴上的比例.

例子:

每个父元素被设置成了弹性盒子(Flexible Box) - "dispaly: flex". 在子元素中设置的 flex:1 表面每个元素占比50%.

        <div class="box" style="display: flex; flex-direction: column; ">
            <div style="flex:1; border: 1px solid blue;">
                row1
            </div>
            <div style="flex:1; border: 1px solid blue;">
                row2
            </div>
        </div>

        <div class="box" style="display: flex; flex-direction: column; ">
            <!-- 这里调整了 flex为2 -->
            <div style="flex:2; border: 1px solid blue;">
                row1
            </div>
            <div style="flex:1; border: 1px solid blue;">
                row2
            </div>
        </div>

        <div class="box" style="display: flex; flex-direction: row; ">
            <div style="flex:1; border: 1px solid blue;">
                column1
            </div>
            <div style="flex:1; border: 1px solid blue;">
                column2
            </div>
        </div>