CSS —— 界面布局

news2024/11/25 10:36:45

flexbox - 弹性盒子布局（弹性布局）

采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"

flex-direction

用于设置主轴方向；子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式

row（默认）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

主轴 &交叉轴：交叉轴垂直于主轴

flex-wrap

用于设置自动换行；如果flexbox 容器（container）的宽度不足以存放所有 flex元素，就会出现滚动条，确保所有的 flex元素都在一行；若想实现超出container的宽度就自动换行，可设置flex-wrap: wrap

nowrap（默认）：不换行
wrap：换行，换到下面
wrap：换行，换到上面

flex-flow

flex-direction和flex-wrap的简写形式，默认为row nowrap

flex-basis

正常情况下，一个flex元素的宽度是由其内容决定的；如果容器还有剩余空间，那么这个flex元素可以分得最多到 flex-basis 指定的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrapper {
            /* 内部显示规则为flexbox布局；外部显示规则时block (div class="wrapper") */
            display: flex; 
            /* 指定flex元素的间距 */
            gap: .5em; 
            /* 设置水平为主轴，左侧为起点，换行 */
            flex-flow: row wrap;
        }
        .wrapper > div {
            /* 边框  属性值：边框线粗细像素 线条种类 线条颜色 */
            border:1px solid black;
        }
    </style>
</head>
<body>
        <div class="wrapper">  
        <div>1</div>
        <div>2</div>
        <div> 3
          <br>3
          <br>3
          <br>3
        </div>
        <div>444</div>
        <div style="flex-basis: 300px">5</div>
        <div style="flex-basis: 200px">6</div>
        <div style="flex-basis: 100px">777777777777777</div>
        <div>8888888888888</div>
      </div>
</body>
</html>

flex-grow

如果有剩余空间，这个元素可以分配到多少的比例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrapper {
            display: flex;
            gap: .5em; 
            flex-flow: row wrap;
            border:1px solid red;
        }
        .wrapper > div {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="wrapper">  
        <div>1</div>
        <div>2</div>
        <div> 3
          <br>3
          <br>3
          <br>3
        </div>
        <div style="flex-grow: 3">5</div>
        <div style="flex-grow: 2">6</div>
        <div style="flex-grow: 1">7</div>
        <div>8888888888888</div>  
      </div>
</body>
</html>

flex-shrink

如果 flex容器空间比所有 flex元素空间总和小，这个元素空间缩减的比例

主轴对齐——justify-content

flex-start：flex元素和容器主轴方向开始位置对齐（左对齐；flex-direction默认值为row）
flex-end：flex元素和容器主轴方向结束位置对齐（右对齐）
center：flex元素和容器主轴方向中间位置对齐
space-between：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container的主轴方向开始位置平齐，最后一个 flex元素和 container的主轴方向结束位置平齐
space-around：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container的主轴方向开始位置的间距以及最后一个 flex元素和 container的主轴方向结束位置的间距都是flex元素间距的一半
space-evenly：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container 的主轴方向开始位置的间距以及最后一个 flex元素和 container的主轴方向结束位置的间距都于flex元素间距相同